跟着学习视频做了个小demo
这里记录一下具体的jquery代码和具体注意点:
$(function() {
load();
//1.按下回车 把完整数据 存储到本地存储里面
$("#title").on("keydown", function(event) {
if (event.keyCode === 13) {
if ($(this).val() == "") {
alert("请输入您要的操作");
} else {
// alert(11);
//先读区本地存储的数据
var local = getData();
console.log(local);
//把local数组进行数据更新
local.push({ title: $(this).val(), done: false });
//把这个数组local存储到本地存储
saveData(local);
load();
$(this).val("");
}
}
})
//亲兄弟可以直接拿到索引号,表兄弟不能直接拿到索引号
$("ol,ul").on("click", "a", function() {
//先获取本地存储
var data = getData();
console.log(data);
//修改数据
var index = $(this).attr("id");
data.splice(index, 1); //从index这个索引号开始删掉一个
//保存到本地存储
saveData(data);
//重新渲染页面
load();
})
//4.todolist正在进行和已完成选项
$("ol,ul").on("click", "input", function() {
//先获取本地存储
var data = getData();
// console.log(data);
//修改数据
var index = $(this).siblings("a").attr("id");
data[index].done = $(this).prop("checked");
console.log(data[index].done);
//保存到本地存储
saveData(data);
//重新渲染页面
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() {
//读取
var data = getData();
console.log(data);
//遍历之前先清空ol里面的的lis
$("ol").empty();
$("ul").empty();
var todoCount = 0; //正在进行的个数
var doneCount = 0; //已经完成的
//遍历
$.each(data, function(i, n) {
if (n.done) {
$("ul").prepend("<li><input type='checkbox' checked='checked' ><p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></li>");
doneCount++;
} else {
$("ol").prepend("<li><input type='checkbox' ><p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></li>");
todoCount++;
}
});
$("#todocount").text(todoCount);
$("#donecount").text(doneCount);
}
})