jQuery实现todoList(http://www.todolist.cn/)
首先将todolist网站分为两个部分，一个是header部分，header部分最重要的是输入框，在输入框中输入内容，敲击回车键（ASCII码是13），将刚才输入的内容添加至下方的列表中，并且，页面刷新时为了保证数据还在列表中，我们将数据存储到localStorage中。
由于我们是把数据存储到localStorage中，localStorage并不会将数据实时渲染到页面中。因此，我的逻辑是，先写一个函数获取本地存储的数据，这里要注意一点，localStorage存储数据都是字符串格式，所以如果localStorage中有数据，我们要把数据用JSON.parse()方法转换成对象格式。
function getData() {
var data = localStorage.getItem("todos");
if (data !== null) {
return JSON.parse(data)
} else {
return []
}
}
既然每次按下回车键都会保存数据到localStorage中，我们不妨写一个保存数据的函数，在需要的时候直接调用它。
function saveData(data) { localStorage.setItem("todos", JSON.stringify(data)) }
当然了，如果数据没被渲染到浏览器中，我们也是拿不到数据的。
function loadData() { var todoCount = 0;//记录没做的事情 var doneCount = 0;//记录已经做了的事情 var data = getData();//先从localStorage中获取数据 $("ul,ol").empty();//这一步是因为在todo和done的列表中数据切换的时候，必须先把列表的数据清空，否则原来的数据在那，又重新渲染了一遍数据 $.each(data, function(i, n) { if (n.done) {//each方法遍历data $("ol").prepend("<li><input type='checkbox' checked='checked'/><span>" + n.todo + "</span><a href='javascript:;' id=" + i + "></a></li>"); doneCount++; } else { $("ul").prepend("<li><input type='checkbox' /><span>" + n.todo + "</span><a href='javascript:;' id=" + i + "></a></li>"); todoCount++; } }); $(".todoCount").text(todoCount); $(".doneCount").text(doneCount); }
接下来是删除数据
$("ul,ol").on("click", "a", function() {
//获取本地存储
var data = getData()
//修改数据
var index = $(this).attr("id");//之前给li加的自定义属性 用来标识数据
data.splice(index, 1);
//保存到本地存储
saveData(data);
//重新渲染页面
loadData();
})
修改复选框的的checked的属性，数据会在todo跟done两个列表中切换，这里用on绑定点击事件是因为li是后来添加的，on可以给当前及未来的元素添加事件处理程序。
$("ul,ol").on("click", "input", function() {
//获取localStorage的数据
var data = getData();
//获取自定义属性id
var index = $(this).siblings("a").attr("id");
data[index].done = $(this).prop("checked")；
saveData(data);
loadData();
})
最后就是给header里的input绑定事件，当按下enter键，就会把数据存储到localStorage中。
$("input").on("keyup", function(event) {
if (event.keyCode == 13) {
var local = getData();
//把最新的数据追加给数组
local.push({
todo: $(this).val(),
done: false
})
$("input").val('');//添加到localStorage中后把input输入框中内容清空
saveData(local);
loadData();
}
})
所有代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .header { height: 50px; background-color: rgba(47, 47, 47, 0.98); padding: 0px 20px; } .header span { float: left; width: 100px; line-height: 50px; color: #DDD; font-size: 24px; } .header input { float: right; width: 60%; height: 24px; margin-top: 12px; text-indent: 10px; border-radius: 5px; box-shadow: 0 1px 0 rgba (255, 255, 255, .4) 0 1px 6px rgba(0, 0, 0, .45) inset; border: none; } li { list-style: none; height: 32px; line-height: 32px; background: #fff; position: relative; margin-bottom: 10px; padding: 0 45px; border-radius: 3px; border-left: 5px solid #629A9C; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); } .body section { position: relative; } .body section h2 { display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } .body section .count { position: absolute; top: 2px; right: 5px; display: inline-block; padding: 0 5px; height: 20px; border-radius: 20px; background: #E6E6FA; line-height: 22px; text-align: center; color: #666; font-size: 14px; } li input { position: absolute; top: 2px; left: 10px; width: 22px; height: 22px; cursor: pointer; } /* li span { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; } */ li a { position: absolute; top: 2px; right: 5px; display: inline-block; width: 14px; height: 12px; border-radius: 14px; border: 6px double #FFF; background: #CCC; line-height: 14px; text-align: center; color: #FFF; font-weight: bold; font-size: 14px; cursor: pointer; } body { background-color: #CDCDCD; } </style> <script src="D:\Codes\Study\js\jquery.js"></script> </head> <body> <div class="header"> <span>todolist：</span> <input type="text" name="" id="" placeholder="添加ToDo"> <br> </div> <div class="body"> <section> <h2>Todo:</h2> <span class="todoCount count"></span> <ul> </ul> </section> <section> <h2>Done:</h2> <span class="doneCount count"></span> <ol> </ol> </section> </div> </body> <script> $(function() { var todos = [{ todo: "no", done: true }] loadData(); //给input绑定事件 $("input").on("keyup", function(event) { if (event.keyCode == 13) { var local = getData(); //把最新的数据追加给数组 local.push({ todo: $(this).val(), done: false }) $("input").val(''); saveData(local); loadData(); } }) //获取数据 读取本地存储的数据 function getData() { var data = localStorage.getItem("todos"); if (data !== null) { return JSON.parse(data) } else { return [] } } //保存数据 function saveData(data) { localStorage.setItem("todos", JSON.stringify(data)) } //渲染数据 function loadData() { var todoCount = 0; var doneCount = 0; var data = getData(); $("ul,ol").empty(); $.each(data, function(i, n) { if (n.done) { $("ol").prepend("<li><input type='checkbox' checked='checked'/><span>" + n.todo + "</span><a href='javascript:;' id=" + i + "></a></li>"); doneCount++; } else { $("ul").prepend("<li><input type='checkbox' /><span>" + n.todo + "</span><a href='javascript:;' id=" + i + "></a></li>"); todoCount++; } }); $(".todoCount").text(todoCount); $(".doneCount").text(doneCount) } //删除数据 $("ul,ol").on("click", "a", function() { //获取本地存储 var data = getData() //修改数据 var index = $(this).attr("id"); console.log(index); //保存到本地存储 data.splice(index, 1); saveData(data); //重新渲染页面 loadData(); }) //修改checked状态 $("ul,ol").on("click", "input", function() { var data = getData(); var index = $(this).siblings("a").attr("id"); data[index].done = $(this).prop("checked"); console.log(data); saveData(data); loadData(); }) }) </script> </html>
