$(function () {
// alert(11);
// 1.按下回车 把完整数据 存储到本地存储里面
// 存储的数据格式 var = todolist = [{title:'xxx',done:false}]
load();
$("#title").on("keydown", function (event) {
if (event.keyCode === 13) {
if ($(this).val() === "") {
alert("请输入您要的操作");
} else {
var local = getDate();
console.log(local);
// 把Local数组进行更新数据把最新的数据追加给Local数组
local.push({ title: $(this).val(), done: false });
//把这个数组的local存储给本地存储
saveDate(local);
// 2.toDoList 本地存储数据渲染加载到页面
load();
$(this).val("");
}
}
});
// 3.toDoList 删除操作
$("ol").on("click", "a", function () {
var data = getDate();
// 修改数据
var index = $(this).attr("id");
data.splice(index, 1);
// 保存到本地存储
saveDate(data);
// 重新渲染页面
load();
});
// 4.toDoList 正在进行和已完成选项操作
$("ol,ul").on("click", "input", function () {
// 先获取本地存储的数据
var data = getDate();
// 修改数据
var index = $(this).siblings("a").attr("id");
// data[].done = ?
data[index].done = $(this).prop("checked");
console.log(data);
// 保存到本地数据
saveDate(data);
//重新渲染页面
load();
});
// 读取本地存储的数据
function getDate() {
var data = localStorage.getItem("todolist");
if (data !== null) {
//本地存储里面的数据是字符串格式的,但是我们需要的是对象格式
return JSON.parse(data);
} else {
return [];
}
}
//保存本地存储数据
function saveDate(data) {
localStorage.setItem("todolist", JSON.stringify(data));
}
// 渲染加载数据
function load() {
// 读取本地存储的数据
var data = getDate();
// 遍历之前先清空ol里面的元素内容
$("ol,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 +
"></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);
}
});
ToDoList:本地存储知识最简单的代办事项列表
最新推荐文章于 2024-01-16 20:20:56 发布