toDoList 备忘录
- 文本框里面输入内容，按下回车，就可以生成待办事项。
- 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
- 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
- 但是本页面内容刷新页面不会丢失。
- 切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。
- 利用事件对象.keyCode判断用户按下回车键（13）。
- 声明一个数组，保存数据。
- 先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。
- 之后把最新从表单获取过来的数据，追加到数组里面。
- 最后把数组存储给本地存储 (声明函数 savaDate())
- 因为后面也会经常渲染加载操作，所以声明一个函数 load，方便后面调用
- 先要读取本地存储数据。（数据不要忘记转换为对象格式）
- 之后遍历这个数据（$.each()），有几条数据，就生成几个小li 添加到 ol 里面。
- 每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。
- 点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
- 核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
- 我们可以给链接自定义属性记录当前的索引号
- 根据这个索引号删除相关的数据----数组的splice(i, 1)方法
- 存储修改后的数据，然后存储给本地存储
- 重新渲染加载数据列表 因为a是动态创建的，我们使用on方法绑定事件
- 当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。
- 点击之后，获取本地存储数据。
- 修改对应数据属性 done 为当前复选框的checked状态。
- 之后保存数据到本地存储
- 重新渲染加载数据列表
- load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面
- 如果当前数据的done 为false， 则是待办事项，就把列表渲染加载到 ol 里面
- 当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。
- 点击之后，获取本地存储数据。
- 修改对应数据属性 done 为当前复选框的checked状态。
- 之后保存数据到本地存储
- 重新渲染加载数据列表
- load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面
- 如果当前数据的done 为false， 则是待办事项，就把列表渲染加载到 ol 里面
一、 我们要实现上面的功能， 首先就是要实现本地存储的任务！让我们一起去回顾一下js里面的本地存储：
localStorage.setItem(key, value) // 用于本地存储
1. 本地存储里面只能存储JSON字符串的数据模式 把我们的数组对象转换为字符格式 JSON.stringify()
localStorage.setItem("todo", JSON.stringify(todolist)) // 本地存储 将todolist转换成JSON字符串的格式进行存储
localStorage.getItem(key) // 用于从本地存储中进行获取值
let data = localStorage.getItem("todo")
2. 获取本地存储数据 我们需要把里面的字符串数据转换成 对象格式 JSON.parse()
data = JSON.parse(data) // JSON.parse(data) 用于将 JSON 格式的字符串 转换回 JavaScript 对象/数组
<script>// 本地存储let todolist = [{title: '我今天吃了八个馒头',done: false}, {tilte: '我今天学习jQuery',done: false},]; // 创建字典序型数组// localStorage.setItem(key, value) // 用于本地存储// 1. 本地存储里面只能存储JSON字符串的数据模式 把我们的数组对象转换为字符格式 JSON.stringify()localStorage.setItem("todo", JSON.stringify(todolist)) // 本地存储 将todolist转换成JSON字符串的格式进行存储let data = localStorage.getItem("todo")// localStorage.getItem(key) // 用于从本地存储中进行获取值console.log(typeof data)// 2. 获取本地存储数据 我们需要把里面的字符串数据转换成 对象格式 JSON.parse()data = JSON.parse(data) // JSON.parse(data) 用于将 JSON 格式的字符串 转换回 JavaScript 对象/数组console.log(data)console.log(data[0].title)</script>这里的jQuery完全实现了关于正在进行 和 已经完成的相互切换 实现了元素之间的增删查改，源文件再这里：https://gitee.com/liu-yihao-hhh/j-query-study/blob/master/jQuery-03/13-todolist/js/todolist.js
强烈推荐自己手撕三遍 ！！！一遍完全根本就不够！自己写出来的话，成就感十足~
$(function () {// alert(11)load()// 1. 按下回车 把完整数据 存储到本地存储里面// 存储的数据格式 let todolist = [{title: "xxx", done: false}]$("#title").on("keydown", function (e) {// 回车键的ASCII值是13if (e.keyCode === 13) {// alert(11)// 1. 先读取本地存储的数据 在外面声明一个函数 每次需要读取的时候就直接调用即可let local = getDate() // local 得到本地存储数据// console.log(local)// 2. 把local数组进行更新数据 把最新的数据追加给local数组local.push({ title: $(this).val(), done: false })// 2.1 把这个数组local存储到本地存储 声明一个保存本地存储函数saveDate(local)// 3. 将本地数组渲染到页面// 3.1 先读取数据load()$(this).val("")}})// 2. 读取本地存储的数据function getDate() {let data = localStorage.getItem("todolist")if (data !== null) {// 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的return JSON.parse(data)}else return []}// 3. 保存本地存储函数function saveDate(data) {localStorage.setItem("todolist", JSON.stringify(data))}// 4. 渲染加载数据function load() {let data = getDate()// 遍历这个数据// 这里会有一个很无语的bug 就是当页面没有被清空的时候 你进行追加数据 那么页面就会将本地存储已经存在的内容再次进行打印一遍// 所以 这里要先进行清空页面(清空ol里面的元素) 然后再进行追加$("ol,ul").empty()let todoCount = 0let 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)}// 5. 删除操作// 由于我们是本地存储进行渲染，那么我们只要对本地存储的该元素进行删除 然后再次渲染即可// 事件委托 因为li的增加是动态操作$("ol, ul").on("click", "a", function () {// 先获取本地存储let data = getDate()// console.log(data)// 修改数据// 这里还是不能用这个方法 容易被写死index// let index = $(this).parents("li").index()let index = $(this).attr("id")console.log(index)// data.splice(data.length - index - 1, 1)// console.log(data)data.splice(index, 1)// 保存到本地存储saveDate(data)// 重新渲染页面load()})// 6. 正在进行 和 已经完成的选项$("ol, ul").on("click", "input", function () {// alert(111)// 先获取本地存储的数据let data = getDate()// 修改数据// let index = $(this).parents("li").index()// index = data.length - index - 1let index = $(this).siblings("a").attr("id")console.log(index)data[index].done = $(this).prop("checked")console.log(data)// 保存到本地存储的数据saveDate(data)// 重新渲染页面 这里对load()函数进行修改// 当done为true 就放在"已经完成里面" done为false 就放在 "正在进行里面"load()})})总结不易~ 本章节对我有很大的收获 希望对你也是！！！！