[TOC] # ToDoList 学习记录    html  js需要实现的  引入文件  ## 实验要求  ## 案例分析 : toDoList分析 ①刷新页面不会丢失数据,因此需要用到本地存储localStorage ②核心思路:不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中,这样保证刷新关闭页面不会丢失数据 ③存储的数据格式: var todolist= \[{ title: 'xx' , done: false}\] ④注意点1 :**本地存储localStorage**里面**只能存储字符串格式**,因此需要把对象转换为字符串**JSON.stringify(data)**. ⑤注意点2**:获取本地存储数据**,需要把里面的**字符串转换为对象格式**JSON.parse()我们才能使用里面的数据。 ~~~ <script> var todolist = [{ title: '我今天吃八个馒头'，done: false}, {title: '我 今天学习'，done: false}, ]; // localStorage.setItem("todo", todolist) ; // 1.本地存储里面只能存储字符串的数据格式把我们的数组对象转换为字符串格式JSON. stringify() localStorage.setItem( "todo"，JSON. stringify (todolist)); var data = localStorage.getItem("todo") // console.log(typeof data) ; // console.log(data[0]. title); // 2.获取本地存储的数据我们需要把里面的字符串数据转换为对象格式JSON. parse( ) data = JSON.parse (data); console.log(data); console.log(Hata[0].title); </script> ~~~ # 代码实验 ## 1.案例: toDoList按下回车把**新数据添加到本地存储里面** ~~~ ①切记:页面中的数据,都要从本地存储里面获取,这样刷新页面不会丢失数据,所以先要把数据保存到本地存储里面。 ②利用事件对象.keyCode判断用户按下回车键(13)。 ③声明一个数组,保存数据。 ④先要读取本地存储原来的数据(声明函数getData()) , 放到这个数组里面。 ⑤之后把最新从表单获取过来的数据,追加到数组里面。 ⑥最后把数组存储给本地存储(声明函数savaDate()) ~~~ ### 代码实验 1.修改（saveDate(local);）  //读取本地存储的数据 ~~~ function getDate() { var data = localStorage . getItem(" todolist"); if (data !== nu1l) { //本地存储里面的数据是字符串格式的但是我们需要的是对象格式的 return JSON . parse(data); } else { return []; } } ~~~ //保存本地存储数据 ~~~ function saveDate(data) { localstorage.setItem( "todolist"，JSON. stringify(data)); } ~~~ ## 2.案例: toDoList本地存储数据**渲染加载到页面** ~~~ ①因为后面也会经常渲染加载操作,所以声明一个函数load ,方便后面调用 ②先要读取本地存储数据。( 数据不要忘记转换为对象格式) ③之后遍历这个数据( $.each0) , 有几条数据,就生成几个小i添加到ol里面。 ④每次渲染之前,先把原先里面ol的内容清空,然后渲染加载最新的数据. ~~~ ### 2.代码实验 2. 修改版2.0  //渲染加载数据 ~~~ function load() { //读取本地存储的数据 var data getDate( ); console.1og(data); //遍历之前先要清空ol里面的元素内容 $("ol" ).empty(); //遍历这个数据 $.each(data, function(i, n) { // console.log(n); $("ol").prepend("<li><input type=' checkbox' > <p>" + n.title + "</p> <a href='javascript: ; '></a></li>") }) } ~~~ ## 3.案例: toDoList删除操作   ### 3.代码实验    ## 4.案例: toDoList正在进行和已完成选项操作   ### 4.代码实验   ## 5.案例: toDoList**统计**正在进行个数和已经**完成个数**   ### 5.代码实验