load(); // 第一步先渲染页面，不然一开始刷新页面时列表不显示 $("#title").on("keydown", function(event) { if(event.keyCode === 13) { if($(this).val() !== "") { var data = getDate(); // 获取本地存储数据 // 把数组进行更新数据，把最新数据追加给数组 data.push({title: $(this).val(), done: false}); saveDate(data); // 保存到本地存储 load(); // 渲染加载到页面 $(this).val(""); } } })
2. 删除待办事项
先获取本地存储数据；
用attr获取自定义属性index（索引）得到用户点击的第几个事项，通过索引删除数组里对应的那组数据；
将更新过的数组保存到本地存储 再渲染给页面
$("ol, ul").on("click", "a", function() { var data = getDate(); // 获取本地数据（data是局部变量，不用担心冲突） var index = $(this).attr("index"); // 用attr获取自定义属性index，得到索引 // splice(index, num)删除数组对象 index为开始删除的位置，num为删除几个 data.splice(index, 1); saveDate(data); load(); })
3. 用户点击复选框来选择事项已完成或未完成
获取本地存储数据；
通过复选框的兄弟a的index属性来获取用户点击的事项的索引（index），将第index个数据的done属性值修改为复选框的值；
将更新过的数组保存到本地存储 再渲染给页面
$("ol, ul").on("click", "input", function() { var data = getDate(); // 利用a获取用户点击的第几个复选框 var index = $(this).siblings("a").attr("index"); // 修改数据：data[索引].属性名 获取固有属性用prop data[index].done = $(this).prop("checked"); saveDate(data); load(); })
详细JS代码：
$(function() { load(); // 先渲染页面，不然一开始刷新页面时列表不显示 // 1、绑定键盘按下事件 $("#title").on("keydown", function(event) { if(event.keyCode === 13) { // 是否按下了回车 回车的ASCII值为13 if($(this).val() == "") { alert("请输入事项内容！") } else { // 不能直接在本地存储里改数据，所以要先获取数据，然后改变数组，再保存到本地 var data = getDate(); // 获取本地存储数据 // 把数组进行更新数据，把最新数据追加给数组 data.push({title: $(this).val(), done: false}); saveDate(data); // 保存到本地存储 load(); // 渲染加载到页面 $(this).val(""); } } }) //2、删除待办事项 $("ol, ul").on("click", "a", function() { var data = getDate(); // 获取本地数据 var index = $(this).attr("index"); // 用attr获取自定义属性，得到索引 // splice(index, num)删除数组对象 index为开始删除的位置，num为删除几个 data.splice(index, 1); saveDate(data); // 删除后在把data保存到本地存储 load(); // 重新渲染页面 }) //3、正在进行和已完成 $("ol, ul").on("click", "input", function() { var data = getDate(); // 获取数据 // 获取用户点击的第几个按钮，利用a var index = $(this).siblings("a").attr("index"); // 修改数据 data[索引].属性名 获取固有属性用prop data[index].done = $(this).prop("checked"); saveDate(data); // 保存到本地存储 load(); // 渲染页面 }) // 获取本地存储数据 function getDate() { var data = localStorage.getItem("todolist"); if(data !== null) { // 如果本地有数据，则返回数据 return JSON.parse(data); // 本地存储只能存储字符串，所以要将字符串转换为数组形式返回 } else { // 如果本地没有数据，则返回一个空数组 return []; } } // 保存本地存储数据 function saveDate(data) { // 用JSON.stringify()将数组转化成字符串保存到本地存储 localStorage.setItem("todolist", JSON.stringify(data)); } // 渲染加载数据 function load() { var data = getDate(); // 先获取本地存储数据 // 遍历本地存储数据 将他们添加到列表中 $("ol, ul").empty(); // 遍历之前先清空列表 var doneCount = 0; // 已经完成的个数 var todoCount = 0; // 正在进行的个数 $.each(data, function(i, ele) { // i是索引 ele为遍历对象 // 如果复选框被选中（已完成）添加到ul里，没被选中（未完成）添加到ol里 if(ele.done) { $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>"); doneCount++; } else { // 将数据添加进列表里 $("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>"); todoCount++; } }) $("#donecount").text(doneCount); $("#todocount").text(todoCount); } })
总结