--------------------------------------------------本地存储格式------------------------------------------------------------
注意：
- 刷新、关闭浏览器都不会丢失数据，所以使用本地存储localStorage
- 虽然看起来像是直接回车，直接点击的事儿，但是，其中的过程都是先把数据存储到本地存储中，再从本地存储取出数据加载到页面
- 因为数据很多，所以本地存储的数据采用对象数组的形式[ { todo: "xxxx"} , {done:false}]
- 因为本地存储localStorage只能存储字符串格式，如果把对象数组转化成字符串毫无意义，为了既能将对象数组转化为字符串，又能正常获取对象数组中的属性，用JSON.stringify(data)
- 但是字符串又不能获取对象数组中的属性，所以，将这些字符串存储到本地存储之后，再转换回对象数组，就可以获得里面的属性了JSON.parse(data)
---------------------------------toDoList按下回车获取本地存储已有的数据--------------------------------
步骤：
- 给表单文本框绑定一个keydown事件，判断用户按下的是不是enter键
- 当按下enter键之后，就声明一个数组，获取本地存储中原来的数据
- 因为后续还会获取本地存储中的数据，所以干脆封装成一个函数getData()
$(function () {
$("#title").on("keydown", function (e) {
if (e.keyCode === 13) {
// 先读取本存储原来的数据
var local = getData();
// console.log(local);
// 再进行更新数据，把新的数组保存到本地
local.push({ tittle: $(this).val(), done: false });
saveData(local);
}
});
//读取本地资源的数据
function getData() {
var data = localStorage.getItem("todolist");
if (data !== null) {
return JSON.parse(data);
} else {
return [];
}
};
注意：
- 声明一个数组保存本地存储原来的数据和从表单获取过来的数据
- 因为本地存储中的数据是字符串型，但是我们希望数组里面存储的是对象数组类型，所以需要用JSON.parse()将字符串转换成数组
- 然后这个数组要保存到本地存储里
---------------------------------------按下回车保存最新数据到本地存储--------------------------------------------
步骤：
- 当用户按下enter的时候，将用户输入的文本和完成状态作为一个对象数组，加入（push）到数组local中
- 再将local数组保存到本地
注意：
- 用户按下enter之后，按理来说，应该给本地存储添加数据，但是没有直接的方法，所以，先给本地存储的数组local追加数据，再把这个数组保存到本地
- 因为本地存储里存储的是字符串，所以要把获取过来的对象数组转换成字符串形式（JSON.stringify）
$("#title").on("keydown", function (e) {
if (e.keyCode === 13) {
// 先读取本存储原来的数据
var local = getData();
// 再进行更新数据，把新的数组保存到本地
local.push({ tittle: $(this).val(), done: false });
saveData(local);
}
});
// 保存数据到本地
function saveData(data) {
localStorage.setItem("todolist", JSON.stringify(data));
}
----------------------------------------本地存储数据渲染加载到页面-------------------------------------------------
步骤：
- 把渲染数据也封装到一个函数load里，方便后面调用。
- 每当按下enter键，也会将本地存储里的数据渲染到页面上，调用load函数
- 在函数里：先获取到本地存储的数据，直接调用getData()即可
- 遍历$.each()从本地通过getData()获取过来的对象数组，每遍历一次，就在页面中的ol里面生成一个li
- 每次生成新的li之前，先清空ol里面的内容
- li里面的内容依次是，一个复选框、p标签显示数据（对象数组里面的title属性），一个a标签
注意：
- 为了让页面一开始就显示数据，所以一开始就应该对数据进行渲染
- 但因为一开始进行渲染，就已经调用了load函数，本地存储里的数据已经加载到了页面中，已经添加到ol中，后面又调用一次load，所以页面回出现两次数据，所以每次渲染之前，要把ol里面的内容清空（empty）
// 渲染加载数据
function load() {
// 先获取本地的数据 获取到对象数组
var data = getData();
$("ol").empty();
$.each(data, function (i, ele) {
var li = $("" + ele.tittle + "
-------------------------------------------删除操作获取当前索引号----------------------------------------------------
步骤：
- 当每个ol中li中的a被点击的时候（事件委派），先获取到本地的数据，再进行删除，再将此数据保存到本地，再重新渲染
- 动态生成li的时候，给每个a添加一个自定义属性，作为a的索引号，通过遍历时的属性i获取（回调函数中的第一个参数）
- 通过getData()获取数据
- 获取到被点击的a的索引号
注意：
- 怎么知道点击了a之后要删除哪个数据呢，只要获取每个a的索引号，删除对应索引号的那条数据即可
- 因为a是动态添加的，所以不能通过单个绑定的方法给a绑定点击事件，而是要通过on
- index()方法获取到的只能是同一个父级的元素们的索引号，即元素之间应该是兄弟关系。而这个案例中，所有的a是包含在li中，它们是表兄弟关系，所以不能通过index()方法获取索引号，于是需要我们在a生成的时候，手动添加一个自定义属性id
--------------------------------------点击删除按钮完成删除操作----------------------------------------------------
步骤：
- 获取到点击的li中a的索引号之后，删除data中对应索引的对象（data是对象数组，数组中的每一个元素都是一个对象呢）
- 再把删除好的data重新保存到本地
- 再重新渲染页面嘿嘿
注意：
- 由于我们无法对页面中的数据直接删除，所以我们就先获取本地存储中的数据（对象数组形式），然后对这个数据进行删除修改，然后再把这个数据重新保存到本地，再到渲染到页面上
- 删除对象数组中的数据splice(开始的索引号，删除的元素个数)
// 4.删除操作
$("ol").on("click", "a", function () {
// 先读取本地数据
var data = getData();
// 修改数据
var index = $(this).attr("id");
// console.log(index);
data.splice(index, 1);
// 保存到本地
saveData(data);
// 重新渲染页面
load();
});
-----------------------------------------------正在进行和已完成选项操作---------------------------------------------
步骤：
- 通过事件委派给ol和ul里的li里的复选框绑定点击事件
- 获取本地存储的数据
- 获取被点击的当前的复选框的索引号（通过复选框的兄弟a的索引号）
- 通过获得的索引号，修改获取过来的本地存储的数据（对象数组）的第几个对象中的done属性，将done属性修改成被选中的当前复选框的checked状态
- 再将修改好的数据重新保存到本地
- 再重新渲染页面，但是要重新添加条件
- 如果done属性的属性值为true，就把动态生成的li添加到已经完成的区域（ul）里，相反，就添加到未完成的区域里（ol）
注意：
- 我们要使复选框是选中状态的li到下方的已完成的事项里，和上面的原理一样，获得本地存储的数据data，使里面的done属性的值修改该li中复选框的状态，再将修改好的数据保存到本地，再进行渲染到页面。通过页面渲染时获取到的done的状态，去判断将li添加到上面的ol里面还是下面的ul里面
- 要想知道要修改data中的哪条数据，就要获得修改状态的复选框的索引号，难道又要给复选框添加自定义属性吗？其实不用，因为复选框们和a标签是亲兄弟，只要获得了a标签的索引号id，这就是该复选框的索引号
- 将动态添加的li加入到ul中时，和ol一样，要先清空ul里面的内容
// 5.正在进行和已完成选项操作
$("ol,ul").on("click", "input", function () { //事件委派
// 先读取本地数据
var data = getData();
// 修改数据
var index = $(this).siblings("a").attr("id"); //这个this是ol和ul里当前被点击的li里的input
// console.log(index);
data[index].done = $(this).prop("checked");
// console.log(data);
// 保存到本地
saveData(data);
// 重新渲染页面
load();
});
------------------------------------------------统计正在进行个数和已经完成个数----------------------------------
步骤：
- 在渲染页面的load函数里，定义两个变量，作为待办个数和已完成个数
- 当有新的li添加到未完成列表中或者已完成列表中，这两个变量就增加1
- 页面渲染完之后，然后将这两个变量的值作为文本值赋给页面中显示个数的span
-----------------------------------------------------附上完整代码---------------------------------------------------------
todolist.html
ToDoList—最简单的待办事项列表
正在进行
已经完成
todolist.js
$(function () {
load(); //一开始就要渲染加载数据
$("#title").on("keydown", function (e) {
if (e.keyCode === 13) {
if ($("#title").val() === "") {
alert("请输入内容");
} else {
// 1.先读取本存储原来的数据
var local = getData();
// console.log(local);
//2. 再进行更新数据，把从表单中获取的数据作为新的数组保存到本地
local.push({ tittle: $(this).val(), done: false });
$(this).val("");
saveData(local);
//3. 再将本地的数据渲染加载到页面
load();
}
}
});
// 4.删除操作
$("ol,ul").on("click", "a", function () {
// 先读取本地数据
var data = getData();
// 修改数据
var index = $(this).attr("id"); //这个this是当前被点击的ol里的li里的a
// console.log(index);
data.splice(index, 1);
// 保存到本地
saveData(data);
// 重新渲染页面
load();
});
// 5.正在进行和已完成选项操作
$("ol,ul").on("click", "input", function () { //事件委派
// 先读取本地数据
var data = getData();
// 修改数据
var index = $(this).siblings("a").attr("id"); //这个this是ol和ul里当前被点击的li里的input
// console.log(index);
data[index].done = $(this).prop("checked");
// console.log(data);
// 保存到本地
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();
var todoCount = 0; //待办个数
var doneCount = 0; //已完成个数
$("ol,ul").empty();
$.each(data, function (i, ele) {
if (ele.done) {
$("ul").prepend($("" + ele.tittle + "
" + ele.tittle + "
index.css
body {
margin: 0;
padding: 0;
font-size: 16px;
background: #CDCDCD;
}
header {
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
}
section {
margin: 0 auto;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #DDD;
font-size: 24px;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
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, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none
}
input:focus {
outline-width: 0
}
h2 {
position: relative;
}
span {
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;
}
ol,
ul {
padding: 0;
list-style: none;
}
li input {
position: absolute;
top: 2px;
left: 10px;
width: 22px;
height: 22px;
cursor: pointer;
}
p {
margin: 0;
}
li p input {
top: 3px;
left: 40px;
width: 70%;
height: 20px;
line-height: 14px;
text-indent: 5px;
font-size: 14px;
}
li {
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);
}
ol li {
cursor: move;
}
ul li {
border-left: 5px solid #999;
opacity: 0.5;
}
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;
}
footer {
color: #666;
font-size: 14px;
text-align: center;
}
footer a {
color: #666;
text-decoration: none;
color: #999;
}
@media screen and (max-device-width: 620px) {
section {
width: 96%;
padding: 0 2%;
}
}
@media screen and (min-width: 620px) {
section {
width: 600px;
padding: 0 10px;
}
}
