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值是13
if (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 = 0
let 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 - 1
let 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()
})
})总结不易~ 本章节对我有很大的收获 希望对你也是！！！！