localStorage实现ToDoList待办事项

最新推荐文章于 2022-05-13 19:35:46 发布
原创 最新推荐文章于 2022-05-13 19:35:46 发布 · 452 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #javascript

本文介绍如何使用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、最终效果

在这里插入图片描述

Vue学习笔记（二）基于Vue2的TodoList待办事项案例 | localStorage本地存储 | Vue2的发布与订阅 | Vue2支持的动画类 |JavaScript原型对象
希望每天都能进步一点点
06-21 1251
基于上一次的学习，最终使用Vue-CLI脚手架实现的TodoList案例效果如下图所示： 现对案例提出几个需求：最终实现的效果如下：参考资料：菜鸟教程 JavaScript 高阶JavaScript中的对象构造器 比如要添加一个属性 hobby 表示爱好错误示范： 正确示范： （修改原先的对象声明） 1. prototype 继承比如 JS 自带的一些对象：同理，我们之前定义的Person对象也会从 Person.prototype 继承属性和方法。所有 JavaScript 中的对象都是位于原型链顶端的
精选资源
todolist:待办事项列表
06-21
【标题】：“todolist：待办事项列表”是基于JavaScript技术实现的一个常见应用，用于管理个人或团队的任务清单。这个项目通常包含一个前端界面，用户可以通过该界面添加、编辑、删除以及标记待办事项的完成状态。 ...
TodoList：一个简单的待办事项列表，其数据存储在LocalStorage中
02-20
待办事项清单 在演示 相依性 React reactDOM React路由器域 react-redux 还原 重击 类名 React可滑动视图 React工具提示 因为使用react-swipeable-views所以内部的.react-swipeable-view-container高度会由一开始加载进来时便决定了，所以如果缩小萤幕宽度后没重整可能会跑版
todo-app:使用localStorage的简单待办事项应用
04-30
待办事项 使用localStorage的简单待办应用程序。
todoList:创建任务列表并将其保存到localStorage
04-06
待办事项清单 创建任务列表并将其保存到localStorage。
用localStorage实现TodoList效果
Ylk_manong的博客
07-11 212
用localStorage实现TodoList效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo3</title> <link rel="st
# localStorage存储TODOLIST
qq_40029828的博客
04-10 276
1、html <!doctype html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
09 React的模块化以及封装Storage实现todolist 待办事项 已经完成事项 以及实现数据持久化（下）
最新发布
03-01
在本课程中，我们将深入探讨React的模块化和如何利用Storage来实现待办事项列表（TodoList），包括已完成和未完成的任务，同时实现数据持久化。这个教程的下部分将着重于具体的技术实现和优化。 首先，React的模块...
jQuery模仿ToDoList实现简单的待办事项列表
10-15
从给定的文件信息中，我们可以提取出以下知识点，关于如何使用jQuery模仿ToDoList实现一个简单的待办事项列表： 1. **项目结构与文件引用**：实现待办事项列表的项目通常包括CSS文件和JavaScript文件。CSS文件负责...
使用jQuery实现ToDoList待办事项功能
"使用jQuery实现一个简单的待办事项（ToDoList）功能，包括添加、完成、删除待办事项，并将数据存储在本地（localStorage），确保页面关闭后数据仍可保留。" 在网页开发中，实现一个待办事项列表是常见的功能需求，...
todo-list-localstorage:只需几个步骤即可使用本地存储的待办事项列表
04-05
使用本地存储的待办事项列表 我的第一个Github项目:)
JavaScript使用localStorage实现ToDoList待办事项
qq_44176252的博客
05-13 386
JavaScript使用localStorage实现ToDoList待办事项
js localStorage实现简易todolist网页
qq_44827640的博客
10-20 208
html <body> <div id="add"> <input type="search" name="" id="search"> </div> <h1>todoList</h1> <div id="todoList"> <p></p> <ul id="todoUl"></ul> &l
使用本地存储localStorage保存数据的todoList
恰西v的前端开发学习笔记
01-12 4659
ToDoList 帮你把要做的事情列出来，一项一项，类似思维导图。 最明显的好处是强迫自己整理出任务的每个部分，理顺后按部就班的完成，提高效率。 现在,我们来使用js来做一个todolist基本功能开始的构思是用一个input来输入要做的事情,按钮确定,然后添加的列表,单击列表里的项目,就会使该项目消失,即完成..
vue+localStorage实现todolist效果（vue入门）
Wang_kaiya的博客
07-10 258
HTML代码 script
用本地存储教你写ToDoList
Jdoit CW的博客
06-04 5737
本文用本地存储写一个简洁版的toDolist 本文核心知识点： 本地存储的应用 jQuery的事件、节点、元素应用 JavaScript的基础应用 没错又是它，我最爱toDolist，来吧，展示： 功能： 文本框里面输入内容，按下回车，就可以生成待办事项。 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。 可以计算出完成与未完成任务的数量 但是本页面刷新或重新打开页面，内容不会丢失。 效果： 1. 分析：toDoList
Vue学习8----demo练习，todolist使用localStorage实现数据的永久存储
翟浩浩Android专栏
04-01 448
ocalStorage 是es5提供的： ocalStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。 ocalStorage 存储字符串。 常见用法： 存储数据 localStorage.setItem(key,value); 拿到数据 localStorage.getItem(key); 删除数据 localStorage.removeItem(key)； 效果...
vue.js做todolist并使用localstorage存储
Code_Pupil的博客
04-10 1143
&lt;template&gt; &lt;div id="app"&gt; &lt;h1 v-text="title"&gt;&lt;/h1&gt; &lt;input v-model="newItem" @keyup.enter="addNew"&gt; &lt;ul&gt; &l
原生JS：ToDoList(带localStorage储存)
qq_52900794的博客
10-16 229
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:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值