todolist---待办事项列表，我愿称之为“简易版计划本”
当我们构建好todolist页面后，就可得到以下页面：
简单部分我们简单掠过，它的css代码是比较简单且单一的，如下所示：
（当然，细节部分可以根据个人需求进行更改，css的变化不影响最终想要呈现的“计划本”的效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDoList-最简单的待办事项列表</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.min.js"></script>
<script src="js/todolist.js"></script>
</head>
<body>
<!-- 头部区域 -->
<!-- 分块 -->
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off">
</section>
</header>
<section>
<h2>正在进行<span id="todocount"></span></h2>
<ol id="todocount" class="demo-box">
</ol>
<h2>已经进行<span id="donecount"></span></h2>
<ul id="donecount">
</ul>
</section>
<footer>
Copyright © 2022 todolist.cn
</footer>
</body>
</html>
它的 footer 区域没有需求的可以直接忽略
注意：一定要将html文件中所有应用的css文件和js文件引进来！！！否则后面的一切都是徒劳的
重点来了！！！ js部分
核心思想：本地储存
要求：按下回车键就将 完整数据 存储到本地存储里面去
首先我们来了解一些知识点，以便于接下来代码的书写
储存的数据格式为： var toDoList = [{title:'xxx',done:false}]
注意：中间是用“,”隔开的哦！
静态存储数据需要：读取本地储存的数据、保存本地储存数据、加载渲染数据
动态存储数据需要：获取本地存储的数据、修改数据、保存到本地存储、重新渲染页面
对数组进行增添元素时使用的是：element.push(内容)
对数组进行删减元素时使用的是：element.splice(删除的起始位置，删除的个数)
本地存储存储数据的类型是字符串型的，因此在存储的时候，我们需要将对象类型转换为字符串型（利用 JSON.stringify())
而在读取数据时，我们有需要将字符串类型的数据转换回原本的对象格式，才能够通过控制台来读取数据（利用 JSON.parse())
回顾js知识（就此次事件）：prepend() 追加元素 empty() 清空元素 splice() 删除元素 attr() 获取我们自定义的属性 prop() 获取固有属性
然后，具体代码如下，请大家细心并耐心的观看，有一些长，但是有大量的注释，它的代码其实是很简单的！这都是作者的心血呢
$(function () {
// 页面重新打开的时候加载一次
load();
// 要求：按下回车键就将 完整数据 存储到本地存储里面去
// 存储的数据格式： var toDoList = [{title:"xxx",done:false/true}]
$('#title').on('keydown', function (event) {
// 条件判断 keyCode 按下的键所对应的ASCII码值
if (event.keyCode === 13) {
if ($(this).val() === '') {
// 如果我们输入的内容为空，就弹出对话框进行提示
alert('请输入您的计划');
} else {
// 如果按下的键是回车键，就读取本地存储的原来的数据
var local = getData();
// console.log(local);
// 1.曲线救国 因为不能直接给本地存储增加，所以就给数组增加数据
// local数据进行更新时，将更新的数据追加到local数组中 利用push
local.push({ title: $(this).val(), done: false });
// $(this).val() 的意思就是将 title表单 里面的值给到 title
saveData(local);
// 3.因为下面要应用 local 但是 local 是局部变量，所以要借用 saveData 作为一个
“中间变量”以便于下面使用
// 本质上还是将数据添加到 toDoList 里面
// 3.加载渲染数据 页面按下回车键后加载一次
load();
// 清空输入框内已经按下回车键的内容
$(this).val('');
}
}
});
// 4.toDoList 删除操作
$('ol,ul').on('click', 'a', function () {
// 给 a 添加事件
// 操作步骤：
// 1.获取本地储存
var data = getData();
console.log(data);
// 2.修改数据 利用索引号
// 但是因为索引号只能应用于“亲兄弟”之间，所以这里需要应用自定义属性 attr()
var index = $(this).attr('id');
console.log(index);
data.splice(index, 1); // 实现当我们点击 a 时就删除整行元素的效果
// 3.保存到本地存储
saveData(data);
// 4.重新渲染页面
load();
});
// 5.toDoList 正在进行和已完成选项操作
$('ol,ul').on('click', "input", function () {
// 1.获取本地存储的数据
var data = getData();
// 2.修改数据 虽然他自己没有索引号，但是他亲兄弟有啊，谁的不都一样，就浅浅借用一下他兄
弟 a 的索引号吧
var index = $(this).siblings('a').attr('id');
// console.log(index);
// 修改done属性，确定其是否被选中 data[?].done= ?
data[index].done = $(this).prop('checked');
console.log(data);
// attr 是自定义属性 prop 是固有属性
// 3.保存到本地存储
saveData(data);
// 4.重新渲染页面
load();
})
// 读取本地储存的数据
function getData() {
var data = localStorage.getItem('toDoList');
if (data !== null) {
return JSON.parse(data);
// 要记得将数据类型转换为我们自己所需的对象格式
} else {
return [];
}
}
// 保存本地储存数据
function saveData(data) {
localStorage.setItem('toDoList', JSON.stringify(data));
// 这一步实际上是把数组保存给本地存储
}
// 加载渲染数据
function load() {
// 1.读取储存的数据
var data = getData();
var todoCount = 0;
var doneCount = 0;
// console.log(data); 证明此时已经数据读取成功
// 遍历数据之前要先将ol和ul里面的元素内容清空，不然它就会重复遍历，相当于按顺序从上至下
反复遍历好几遍
$('ol,ul').empty();
// 遍历这个数据 $.each()
$.each(data, function (i, n) { // i 是索引号 n 是想要的数据 data就是需要遍历的数据
// console.log(n);
// 追加元素 利用prepend()
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);
}
})
todoCount++; 和 doneCount++; 是为了计算正在进行和已经完成的事项的个数，使得整体效果更为直观且美观
好了，当大家看到这里的时候应该已经对“简易版计划本”的制作有了一定的了解了，“实践是检验真理的唯一标准”，赶紧自己动手操作以下吧！！！
如有错误，请大家在评论区中指正！！！我们共同进步
