本文主要是对记事清单案例中javaScript部分的分析。
目录
主要思路
功能描述:
- 文本框里面输入内容，按下回车，就可以生成待办事项。
- 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
- 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
- 但是本页面内容刷新页面不会丢失。
切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面才不会丢失数据，所以先要把数据保存到本地存储里面。存储的数据格式：var todolist = [{ title : ‘xxx’, done: false}]
主要思路
一.toDoList 按下回车把新数据添加到本地存储里面
利用事件对象.keyCode判断用户按下回车键（13），当用户输入内容不为空时，进行操作。
先要读取本地存储原来的数据（声明函数 getLocal()），放到这个数组里面。 之后把最新从表单获取过来的数据，追加到数组里面。 最后把数组存储给本地存储 (声明函数 savaLocal())。
$("#title").on("keydown",function(e) {
if(e.keyCode===13) {
if ($(this).val().trim()==="") {
alert("请输入您想要的操作");
}else {
//读取本地存储内容
var local=getLocal();
//新内容追加给本地存储里:先追加给对象，对象再转化为字符串放入本地存储
local.push({title:$(this).val(),done:false});
// console.log(local)
// localStorage.setItem("todolist",JSON.stringify(local));
saveLocal(local);
//2.本地存储数据渲染到页面中
load();
//优化
$(this).val("");
}
}
})- 读取本地存储数据getLocal()函数
获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据。
//读取本地存储内容
function getLocal() {
var data=localStorage.getItem("todolist")
if(data!==null) {
return JSON.parse(data);
}else {
return [];
}
}- 放入本地存储函数
放入本地存储的数据必须是字符串形式的，所以利用JSON.stringify()方法把数组转化为字符串再放入本地存储。
//放入本地存储,注意形参的使用
function saveLocal(data) {
localStorage.setItem("todolist",JSON.stringify(data));
}- 渲染加载数据函数
//渲染加载数据
function load() {
var todoCount=0;
var doneCount=0;
//把ol，ul里面的内容清空
$("ol,ul").empty();
var data=getLocal();
$.each(data,function(i,ele) {
//注意自定义属性id的添加
// var lis=$("<li><input type='checkbox'><p>"+ele.title+"</p><a href='javascript:;' id="+i+"></a></li>")
//如果是true添加到ul已经完成事项中，如果是false则添加到ol正在进行事项中
if(ele.done) {
$("ul").prepend($("<li><input type='checkbox' checked='true'><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").html(todoCount);
$("#donecount").html(doneCount);
}
二.删除操作
核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li。
$("ol,ul").on("click","a",function(e) {
var local= getLocal();
// console.log(local)
var index=$(e.target).attr("id");
// console.log(index)
local.splice(index,1);
saveLocal(local);
load();
})三.正在进行和已完成选项操作
当点击复选框，修改本地存储数据，再重新加载数据列表。
$("ol,ul").on("click","input",function(e) {
var local= getLocal();
var index=$(e.target).siblings("a").attr("id")
// console.log($(e.target).prop("checked"))
local[index].done=$(e.target).prop("checked")
// console.log(local)
saveLocal(local);
load();
})四.统计正在进行和已完成个数
声明2个变量 ：todocount 待办个数 donecount 已完成个数 当进行遍历本地存储数据的时候， 如果 数据done为 false， 则 todocount++, 否则 donecount++。
//统计事项
$("#todocount").html(todoCount);
$("#donecount").html(doneCount);todolist.js完整代码
$(function() {
load();
// 1.按下回车，把完整数据存放在本地存储里面
$("#title").on("keydown",function(e) {
if(e.keyCode===13) {
if ($(this).val().trim()==="") {
alert("请输入您想要的操作");
}else {
//读取本地存储内容
var local=getLocal();
//新内容追加给本地存储里:先追加给对象，对象再转化为字符串放入本地存储
local.push({title:$(this).val(),done:false});
// console.log(local)
// localStorage.setItem("todolist",JSON.stringify(local));
saveLocal(local);
//2.本地存储数据渲染到页面中
load();
//优化
$(this).val("");
}
}
})
//3.删除操作:先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
$("ol,ul").on("click","a",function(e) {
var local= getLocal();
// console.log(local)
var index=$(e.target).attr("id");
// console.log(index)
local.splice(index,1);//存在bug
saveLocal(local);
load();
})
//4.正在进行和已经完成的选项操作
// 当点击复选框，修改本地存储数据，再重新加载数据列表
$("ol,ul").on("click","input",function(e) {
var local= getLocal();
var index=$(e.target).siblings("a").attr("id")
// console.log($(e.target).prop("checked"))
local[index].done=$(e.target).prop("checked")
// console.log(local)
saveLocal(local);
load();
})
//5.修改事项
// $("ul,ol").on("dblclick","input",function(e) {
// console.log('11')
// $(e.target).text($(input).val());
// })
//读取本地存储内容
function getLocal() {
var data=localStorage.getItem("todolist")
if(data!==null) {
return JSON.parse(data);
}else {
return [];
}
}
//放入本地存储,注意形参的使用
function saveLocal(data) {
localStorage.setItem("todolist",JSON.stringify(data));
}
//渲染加载数据
function load() {
var todoCount=0;
var doneCount=0;
//把ol里面的内容清空
$("ol,ul").empty();
var data=getLocal();
$.each(data,function(i,ele) {
//注意自定义属性id的添加
// var lis=$("<li><input type='checkbox'><p>"+ele.title+"</p><a href='javascript:;' id="+i+"></a></li>")
//如果是true添加到ul已经完成事项中，如果是false则添加到ol正在进行事项中
if(ele.done) {
$("ul").prepend($("<li><input type='checkbox' checked='true'><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").html(todoCount);
$("#donecount").html(doneCount);
}
})
运行结果：
