文章目录
todolist案例
html结构
功能
功能一: 文本框里面输入内容,按下回车,就可以生成待办事项。
功能二: 点击待办事项复选框,就可以把当前数据添加到已完成事项里面。
功能三: 点击已完成事项复选框,就可以把当前数据添加到待办事项里面。
功能四: 但是本页面内容刷新页面不会丢失。
功能五: 删除事项
功能六: 统计事件个数
分析
对于功能四,需要用到本地存储localStorage,不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中。
存储数据的格式
var todolist = [{ title:'xxx', done:false }]
注:
1.本地存储只能存储字符串的数据格式 把数据对象改变为字符串格式 JSON.stringify()
2.获取本地存储数据,需要把里面的字符串数据转换为对象格式 JSON.parse()
以上需要几个常用函数:读取本地数据getData()
、新数组保存本地存储数据saveData()
、渲染加载数据load()
注: 将统计事件个数和动态创建li放入渲染加载数据函数load()中
$(function () {
load();
//按下回车生成待办事项
$("#title").on("keydown", function(event) {
if (event.keyCode === 13) {
if ($(this).val() === "") {
alert("请输入您要的操作");
} else {
//先读取本地存储原来的数据
var local = getData();
//把local数组进行更新数据 把最新的数据追加给local数组
local.push({ title: $(this).val(), done: false });
//把这个数组local 存储给本地存储
saveData(local);
//本地存储数据渲染加载到页面
load();
$(this).val("");
}
}
});
//删除:先获取本地数据,删除后保存到本地,再渲染
$("ol,ul").on("click", "a", function () {
//先获取本地存储
var data = getData();
//修改数据(获取自定义属性值) 给“删除”增添的新属性id
var index = $(this).attr("id");
data.splice(index, 1);
//保存到本地存储
saveData(data);
//重新渲染
load();
})
//点击复选框后,改变每条数据的done值,保存至本地后再渲染数据
$("ol,ul").on("click", "input", function () {
var data = getData();
var index = $(this).siblings("a").attr("id");
data[index].done = $(this).prop("checked");
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();
//遍历前先清空 不然会出现两次
$("ol,ul").empty();
var todoCount = 0;
var doneCount = 0
//遍历数据,有几条就添加几个li
$.each(data, function (i, ele) {
if (ele.done) {
$("ul").prepend("<li><input type='checkbox' checked='checked'><p>" + ele.title + "</p><a href='javascript:;' id=" + i + "></a></li>")
doneCount++;
} else {
$("ol").prepend("<li><input type='checkbox'><p>" + ele.title + "</p><a href='javascript:;' id=" + i + "></a></li>")
todoCount++;
}
});
$("#todocount").text(todoCount);
$("#donecount").text(doneCount);
}
})