index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<style>
ol li p{
display: inline-block;
margin-left: 100px;
margin-right: 100px;
}
ol li input{
width: 20px;
height: 20px;
}
ul li p{
display: inline-block;
margin-left: 100px;
margin-right: 100px;
}
ul li input{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<section>
<label for="title">ToDList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo">
</section>
<section>
<h2 >正在进行<span id="todocount" style="margin-left: 100px"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2 >已经完成<span id="donecount" style="margin-left: 100px"></span></h2>
<ul id="donelist">
</ul>
</section>
</body>
<script>
// localStorage.setItem--JSON.stringift本地存储要把数组转为字符串，取出来时要转为数组对象localStorage.getItem--JSON.parse(data)
$(function () {
// 渲染页面
load()
// 1.按下回车 把完整数据 存储到本地存储里面
// 存储的数据格式 var todolist = [{title:'xxx',done:false}]
$('#title').on('keydown',function (event) {
if (event.keyCode === 13){
if ($(this).val() === ""){
alert("请输入内容")
} else {
// 先读取本地存储原来的数据
var local = getdata();
// console.log(local);
// 把local数组进行更新数据，把最新的数据追加给local数组
local.push({title:$('#title').val(),done:false})
// 调用函数，把这个数组local 存储给本地
saveDate(local);
// 渲染页面
load();
$(this).val('')
}
}
});
// 3.todolist删除操作
$('ol,ul').on('click','a',function () {
// 先获取本地数据
var data = getdata();
// 这种方法删除不能从本地删除，所以不行
// console.log($(this));
// $(this).parent().remove()
// 修改数据，拿到自定义的属性用attr,不是prop
var index = $(this).attr('id')
console.log(index);
// 删除数据中的内容，splice(index,1) index从哪里开始，删除第几个
data.splice(index,1)
// 保存到本地数据
saveDate(data)
// 重新渲染页面
load()
});
// 4.todolist正在进行和已完成选项操作
$('ol,ul').on('click','input',function () {
// 先读取本地数据
var data = getdata();
var index = $(this).siblings('a').attr('id')
data[index].done = $(this).prop('checked')
// console.log(data);
// 保存到本地数据
saveDate(data)
// 从新渲染
load()
})
// 读取本地存储的数据
function getdata() {
var data = localStorage.getItem('todolist')
if (data !== null){
// 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式
return JSON.parse(data)
} else {
return [];
}
};
// 保存本地数据
function saveDate(local) {
return localStorage.setItem('todolist',JSON.stringify(local))
}
// 渲染加载数据
function load() {
var data = getdata();
// console.log(data);
// 遍历之前先要清空ol里面的的元素内容，防止重复
$('ol').empty()
$('ul').empty()
var todoCount = 0;//正在进行的个数
var doneCount = 0;//已经完成
$.each(data,function (i,n) {
console.log(n);
if (n.done == false){
$('ol').prepend('<li><input type="checkbox"><p>'+n.title+'</p><a href="javascript:;" id='+i+'>删除</a></li>')
todoCount++
} else {
$('ul').prepend('<li><input type="checkbox" checked><p>'+n.title+'</p><a href="javascript:;" id='+i+'>删除</a></li>')
doneCount++
}
});
$('#todocount').html(doneCount);
$('#donecount').html(todoCount)
}
})
</script>
</html>
运行结果：
