爱站程序员基地数据都存在aryList数组中
通过数组中的数据来操控dom元素
有数据输入,存储,渲染到浏览器,删除,更改状态等操作
$(function () {// alert(11);// 1. 按下回车 把完整数据 存储到本地存储里面// 存储的数据格式 var todolist = [{title: \"xxx\", done: false}]load();$(\"#title\").on(\"keydown\", function (event) {if (event.keyCode === 13) {if ($(this).val() === \"\") {alert(\"请输入您要的操作\");} else {// 先读取本地存储原来的数据var local = getDate();// console.log(local);// 把local数组进行更新数据 把最新的数据追加给local数组local.push({title: $(this).val(),done: false});// 把这个数组local 存储给本地存储saveDate(local);// 2. toDoList 本地存储数据渲染加载到页面load();$(this).val(\"\");}}});// 3. toDoList 删除操作$(\"ol, ul\").on(\"click\", \"a\", function () {// alert(11);// 先获取本地存储var data = getDate();console.log(data);// 修改数据var index = $(this).attr(\"id\");console.log(index);data.splice(index, 1);// 保存到本地存储saveDate(data);// 重新渲染页面load();});// 4. toDoList 正在进行和已完成选项操作$(\"ol, ul\").on(\"click\", \"input\", function () {// alert(11);// 先获取本地存储的数据var data = getDate();// 修改数据var index = $(this).siblings(\"a\").attr(\"id\");console.log(index);// data[?].done = ?data[index].done = $(this).prop(\"checked\");console.log(data);// 保存到本地存储saveDate(data);// 重新渲染页面load();});// 读取本地存储的数据function getDate() {var data = localStorage.getItem(\"todolist\");if (data !== null) {// 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的return JSON.parse(data);} else {return [];}}// 保存本地存储数据function saveDate(data) {localStorage.setItem(\"todolist\", JSON.stringify(data));}// 渲染加载数据function load() {// 读取本地存储的数据var data = getDate();console.log(data);// 遍历之前先要清空ol里面的元素内容$(\"ol, ul\").empty();var todoCount = 0; // 正在进行的个数var doneCount = 0; // 已经完成的个数// 遍历这个数据$.each(data, function (i, n) {// console.log(n);if (n.done) {$(\"ul\").prepend(\"<li><input type=\'checkbox\' checked=\'checked\' > <p>\" + n.title + \"</p> <a href=\'javascript:;\' id=\" + i + \" ></a></li>\");doneCount++;} else {$(\"ol\").prepend(\"<li><input type=\'checkbox\' > <p>\" + n.title + \"</p> <a href=\'javascript:;\' id=\" + i + \" ></a></li>\");todoCount++;}});$(\"#todocount\").text(todoCount);$(\"#donecount\").text(doneCount);}})
