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>