2.代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 输入框 -->
    <div class="plan">
      <h1>传智-ToDoList</h1>
      <div>
        <input class="txt" placeholder="请输入目标..." type="text" />
        <input type="button" class="add" value="添加" />
      </div>
    </div>
    <div class="w">
      <h2>正在进行的任务</h2>
      <ol>
        <!-- <li><input type="checkbox"><span>吃饭</span></li> -->
      </ol>
      <h2>已经完成的任务</h2>
      <ul>
        <!-- <li><span>吃饭</span></li>-->
      </ul>
    </div>
    <script src="lib/jquery-1.12.4.js"></script>
    <!-- <script src="js/index.js"></script> -->
    <script type="text/javascript">
      //获取本地的数据
      let str = localStorage.getItem("toDoList"); //进行判断是否有 如果没有话 自定义一个数据
      if (str == null) {
        localStorage.setItem(
          "toDoList",
          '[{"name":"吃饭","isOk":false },{"name":"睡觉","isOk":true }]'
        );
        str = localStorage.getItem("toDoList");
      } //得到这个数据之后  进行循环这个数据  在每次循环中还要判断下isOk的值  决定新创建li的标签是放在哪个位置 // 在创建li标签的时候 通过attr()创建一个假设的索引值  类似于index  为了标记这个li表示的是数据中的哪个对象  所以根据数组的索引值来创建最好
      let arr = JSON.parse(str);
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].isOk == true) {
          $("<li></li>")
            .html("<span>" + arr[i].name + "</span>")
            .appendTo("ul");
        } else {
          $("<li></li>")
            .attr("num", i)
            .html('<input type="checkbox"><span>' + arr[i].name + "</span>")
            .appendTo("ol");
        }
      }
      //设置添加事件
      $(".add").click(function () {
        let doThing = $(".txt").val();
        let li = $(
          '<li><input type="checkbox"><span>' + doThing + "</span></li>"
        );
        $("ol").eq(0).append(li); //页面元素已经添加完成之后  将数据更新到本地
        $(".txt").val(""); //新创建的元素最好是根据本地数据的索引值设定的自定义属性
        li.attr("num", arr.length);
        //页面完成之后  需要在本地保存数据
        arr.push({ name: doThing, isOk: false });
        str = JSON.stringify(arr);
        localStorage.setItem("toDoList", str);
      });
      //给checkbox 加上事件委托
      $("ol").on("click", "input", function () {
        $("ul").append($(this).parent());
        $(this).hide();
        let li = $(this).parent();
        //通过li设定的自定义属性 num 也就是这个li对象在数组中得到索引  从而找到这个对象  然后进行修改其isOk的值
        let i = li.attr("num");
        arr[i].isOk = true;
        str = JSON.stringify(arr);
        localStorage.setItem("toDoList", str);
      });
    </script>
  </body>
</html>

3.创作流程

　　1.给添加按钮完成事件绑定

　　2,给checkbox 添加事件绑定因为都是li和input都是动态创建的元素绑定不上事件所以使用事件委托给外面的ol

　　3.在页面功能代码写好之后需要对本地数据进行增加或者修改的处理

　　　　 3.1 在页面加载的时候首先要去本地区获取数据通过数据中的isOk的不同从而创建不同li标签添加到不同位置去显示.

　　　　　　注意:创建li标签的时候需要根据数据中的每个对象自定义一个属性num

　　　　3.2 点击增加的之后需要将内容更新到本地数据中去

　　　　3.3 点击checkbox的时候需要根据li的获取到对应数据中的对象从而修改一下isOk的值

　　　　　　注意:因为一开始在创建li标签就是根据数据中的对象的索引值创建的并且将对象的索引值设定成了每个li的自定义属性通过li中的自定义属性就可以获取到对象在数据中的索引值从而找到这个对象进行了修改

4总结:

　　在给页面创建li标签的时候没有意识到数据中的每个对象与li之间的关系

　　数据中的每个对象就相当创建的一个li对象

　　因为一开始的时候是在获取数据的时候创建的li对象给li增加的自定义属性则在手动添加数据的时候也要给li设置自定义属性

toDoList案例

效果:

2.代码:

3.创作流程

4总结:

效果:　　