本文介绍如何使用LocalStorage实现一个简单的待办事项应用。该应用包括添加、标记完成和删除待办事项的功能，并能实时更新存储的数据。
localStorage实现ToDoList待办事项
1、思想
判断浏览器是否存在存放待办事项的key，不存在则创建一个key，命名为XXX，存在则将里面的value遍历出来存入一个临时数组arr，以便以下的操作。
添加操作：
创建一个对象obj，obj对象有两个属性title和done，用于存放输入的内容以及状态（是否完成true或false），获取在输入框中输入待办事项内容，当敲回车之后将此内容输出到正在进行的列表中，等待操作，同时将此次输入的待办事项push到arr中，再将arr存入localStorage。
单选按钮操作
当点击正在进行列表中的单选按钮时，判断value中是否才在此title，存在则将此事项的done设置为true，然后重新存入localStorage，刷新页面，此事项即输出到已经完成列表中。
删除操作
当点击事项对应的删除按钮时，判断此title是否存在于localStorage中，存在则通过数组操作删除对应的元素，在将arr重新存入localStorage中，刷新页面。
源码
主页面 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ToDoList</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="header">
<div>
<span>ToDoList</span>
<input type="text" id="input1" placeholder="添加ToDo"/>
</div>
</div>
<div class="main">
<div id="showDoing">
<br>
<h2>
正在进行：
<span id="count1">0</span>
</h2>
<br>
</div>
<br>
<div id="showDone">
<h2>
已经完成：
<span id="count2">0</span>
</h2>
<br>
</div>
</div>
</body>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>
样式 index.css
*{
margin: 0;
padding: 0;
}
body{
background-color: #CDCDCD;
}
.header{
width: 100%;
height: 50px;
margin: 0 auto;
background-color: rgba(47,47,47,0.98);
}
.header div{
width: 40%;
height: 50px;
margin: 0 auto;
}
.header div span{
display: inline-block;
height: 50px;
color: #DDD;
font-size: 30px;
line-height: 50px;
float: left;
}
.header div input{
display: inline-block;
width: 60%;
height: 28px;
border-radius: 5px;
float: right;
margin-top: 11px;
text-indent: 10px;
border: none;
}
.main{
width: 40%;
margin: 0 auto;
}
#showDoing p{
height: 30px;
line-height: 30px;
margin-top: 10px;
font-size: 20px;
border-radius: 5px;
}
#showDoing h2{
height: 30px;
}
#showDoing h2 span{
float: right;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
margin-top: 5px;
border-radius: 10px;
font-size: 14px;
background-color: #E6E6FA;
}
#showDoing p input:first-child{
width: 30px;
height: 20px;
margin-top: 5px;
}
#showDoing p input:last-child{
width: 30px;
height: 25px;
margin-top: 2.5px;
}
#showDone p{
height: 30px;
line-height: 30px;
margin-top: 10px;
font-size: 20px;
border-radius: 5px;
}
#showDone h2{
height: 30px;
}
#showDone h2 span{
float: right;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
margin-top: 5px;
border-radius: 10px;
font-size: 14px;
background-color: #E6E6FA;
}
#showDone p input:first-child{
width: 30px;
height: 20px;
margin-top: 5px;
}
#showDone p input:last-child{
width: 30px;
height: 25px;
margin-top: 2.5px;
}
index.js
var input1 = document.getElementById("input1");
var showDoing = document.getElementById("showDoing");
var showDone = document.getElementById("showDone");
var ps = showDoing.getElementsByTagName("p");
var count1 = document.getElementById("count1");
var count2 = document.getElementById("count2");
var arr=[];
var sum1=0;
var sum2=0;
// 判断是否存在key为ToDoList的localStorage
if(localStorage.getItem("ToDoList") != null) {//如果存在
var objAfter = JSON.parse(localStorage.getItem("ToDoList"));
// 循环遍历其中的内容
for(var i=0;i<objAfter.length;i++)
{
// 将localStorage的value存入数组，便于下面的操作
arr.push(objAfter[i]);
// 判断todo是否已经完成
if(objAfter[i].done==false)
{
// 没有完成则新建节点来显示未完成的todo信息
var p = document.createElement("p");
var input = document.createElement("input");
var input11 = document.createElement("input");
input11.type="button";
input11.value="X";
p.style.width="100"+"%";
input11.style.backgroundColor="goldenrod";
input11.style.borderRadius="20"+"px";
input11.style.float="right";
input.type="checkbox";
input.id="input2";
input.style.float="left";
p.innerHTML=objAfter[i].title;
p.style.backgroundColor="#7FFFD4";
p.appendChild(input);
p.appendChild(input11);
showDoing.appendChild(p);
// 记录未完成的数量
sum1++;
// 把未完成的总数量输出到对应的位置
count1.innerHTML=sum1;
}
// 如果已经完成todo
else{
// 创建新节点来显示完成的todo信息
var p = document.createElement("p");
var input = document.createElement("input");
var input11 = document.createElement("input");
input11.type="button";
input11.value="X";
p.style.width="100"+"%";
input11.style.backgroundColor="goldenrod";
input11.style.borderRadius="20"+"px";
input11.style.float="right";
input.type="checkbox";
input.checked="checked";
input.style.float="left";
p.innerHTML=objAfter[i].title;
p.style.backgroundColor="#7FFFD4";
p.appendChild(input);
p.appendChild(input11);
showDone.appendChild(p);
// 记录完成的todo数量
sum2++;
// 把已完成的todo总数输出到指定位置
count2.innerHTML=sum2;
}
}
}
// 如果不存在key为ToDoList，则创建，并为其value赋值为“{}”
else{
localStorage.setItem("ToDoList","{}");
}
// 添加todo的输入框事件
input1.onkeydown= function(ev){
var e = ev || e.window.event;
var which = e.which || e.keyCode;
// 输入框输入信息后按回车键后触发事件
if(which==13&&input1.value!="")
{
var obj = {};
// 创建节点来显示输入的todo信息
var p = document.createElement("p");
p.innerHTML=input1.value;
p.style.backgroundColor="#7FFFD4";
showDoing.appendChild(p);
// 将title设置为输入框输入的内容
obj.title=input1.value;
// todo默认为未完成，即false
obj.done=false;
// 将obj对象添加到数组arr的末尾
arr.push(obj);
// 保存arr数组到localStorage中
storageObj(arr);
// 保存后清空输入框的内容，以便下次输入
input1.value="";
// 刷新页面
location.reload();
}
}
//storageObj函数把一个对象（数组）存入localStorage中
function storageObj(obj) {
var checkedIdStr = JSON.stringify(obj);
localStorage.setItem("ToDoList", checkedIdStr);
};
var showDoinginputs = showDoing.getElementsByTagName("input");
var showDoneinputs = showDone.getElementsByTagName("input");
// 获取复选框，即单选按钮
for(var j=0;j<showDoinginputs.length;j++){
showDoinginputs[j].index =j;
// 当点击未完成的单选按钮
if(j%2==0)
{
showDoinginputs[j].onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
// 复制点击的节点
var newNode = target.parentNode.cloneNode(true);
// 将点击的节点添加到已完成todo的列表中
showDone.appendChild(newNode);
// 判断点击的title是否存在于localStorage中
for(var y=0;y<objAfter.length;y++)
{
// 如果存在
if(arr[y].title==target.parentNode.innerText){
// 将todo设置为已完成
arr[y].done=true;
// 将arr存入localStorage中
storageObj(arr);
}
}
// 刷新页面
location.reload();
}
}
// 当点击未完成的删除按钮
else
{
showDoinginputs[j].onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
for(var y=0;y<objAfter.length;y++)
{
// 判断点击的title是否存在于localStorage中
if(arr[y].title==target.parentNode.innerText){
//存在则删除
arr.splice(y,1);
// 重新存入localStorage中
storageObj(arr);
location.reload();
}
}
}
}
}
// 获取已完成todo信息
for(var x=0;x<showDoneinputs.length;x++){
showDoneinputs[x].index=x;
// 当点击已完成的单选按钮
if(x%2==0)
{
showDoneinputs[x].onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
var newNode = target.parentNode.cloneNode(true);
showDoing.appendChild(newNode);
for(var y=0;y<objAfter.length;y++)
{
if(arr[y].title==target.parentNode.innerText){
arr[y].done=false;
storageObj(arr);
}
}
location.reload();
}
}
// 当点击已完成的删除按钮
else
{
showDoneinputs[x].onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
for(var y=0;y<objAfter.length;y++)
{
if(arr[y].title==target.parentNode.innerText){
arr.splice(y,1);
storageObj(arr);
location.reload();
}
}
}
}
}
3、最终效果
扫一扫
1251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
