JQuery学习笔记“todolist”实战案例（对本地存储数据的操作）

最新推荐文章于 2024-05-08 02:39:14 发布

雨飞叶

最新推荐文章于 2024-05-08 02:39:14 发布

阅读量474

点赞数 1

分类专栏：前端文章标签： jquery css3 前端

本文链接：https://blog.csdn.net/heartmvcom/article/details/106938194

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最近学习了一个JQuery实战案例：todolist。主要是对localStorage本地存储数据的增、删、改、查操作与页面的渲染。综合性很强。

现在把这个案例作为笔记放在网络上，就算忘记了，也可以随时联网打开，把源码复制过来，根据需求更改使用。有需要的朋友也可以参考一下哦。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/1.11.3jquery.min.js">	</script>
	<title>heartmv.com</title>
	<style>
		* {
			margin: 0;
			padding: 0
		}
		html {
			font-size: 10px;
		}
		body {
			font-size: 1.6rem;
			background: #cdcdcd;
		}
		header{
			height:5rem;
			background: #333;
			line-height: 5rem;
		}
		header h1{
			color: #fff;
			width: 200px;
		}
		header input{
			position: absolute;
			right:50px;
			top:50%;
			transform: translateY(-50%);
			width: 60%;
			height: 2.5rem;
			border-radius: 5px;
			padding-left: 10px;
		}
		header button{
			right: 0;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			padding: 0 7px;
			height: 3rem;
		}
		.container{
			width: 600px;
			margin: 0 auto;
			position: relative;
		}
		.container .todo{
			margin: 15px 0;
		}
		.container h3{
			font-size: 24px;
			position: relative;
		}
		.container span{
			position: absolute;
			right: 0;
			top: 5px;
			height: 20px;
			background: #eee;
			padding: 2px 5px;
			border-radius: 50%;
			font-size: 18px;
			text-align: center;
			line-height: 20px;
		}
		.container li{
			list-style: none;
			border-left:3px solid #008000;
			border-radius: 3px;
			margin: 15px 0;
			position: relative;
			height: 30px;
			line-height: 30px;
			background: #fff;;
		}
		.container .done li{
			background: #757575;
		}
		.container input[type=checkbox]{
			position: absolute;
			left:15px;
			width: 24px;
			height: 24px;
			top:3px;
		}
		.container li p{
			margin-left: 50px;
		}
		.container li a{
			display: block;
			width: 24px;
			height: 24px;
			text-align: center;
			line-height: 24px;
			position: absolute;
			right: 15px;
			top: 3px;
			text-decoration: none;
			border: 1px solid #ccc;
			border-radius: 50%;
		}
	</style>
</head>

<body>
	<header>
		<section class="container">
			<h1>ToDolist</h1>
			<input class="do" type="text" placeholder="请输入待办事项">
			<button class="btn" type="button">添加</button>
		</section>
	</header>
	<section class="container">
		<div class="todo">
			<h3>正在进行<span>0</span></h3>
			<ul>
				
			</ul>
		</div>
		<div class="done">
			<h3>已经完成<span>0</span></h3>
			<ul>
				
			</ul>
		</div>
	</section>
	
	<script type="text/javascript">
		//输入待办事项，按下回车键存储进本地存储(数据格式是数组对象:[{title:"", done:false}])
		loadData();//页面加载里先遍历一次本地存储数据并渲染到页面
		$(".do").on("keydown", function(e){
			if(e.keyCode===13){
				//先读取可能已有的本地存储数据，存于变量locals
				if($(this).val()!==""){
					var locals=getData();
					//把新输入的数据添加到变量locals的后面
					locals.push({title:$(this).val(), done: false});
					//把更新的locals数据再存储到本地存储(这样，刷新后数据也存在)
					saveData(locals);
					$(this).val("");
					//输入完再次渲染页面
					loadData();
				}
			}
		})
		
		//输入待办事项，点击按钮添加本地存储(与上面一样)
		$(".btn").on("click", function(){
			if($(".do").val()!==""){
				var locals=getData();
				locals.push({title:$(".do").val(), done: false});
				saveData(locals);
				$(".do").val("");
				loadData();
			}
		})
		
		//读取本地存储数据
		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 loadData(){
			//先读取本地存储数据
			var locals=getData();
			//先清空ul里的元素内容，避免重复加载
			$("ul").empty();
			//遍历数据
			var todu=0;//没完成事件数量
			var done=0;//已完成事件数量
			$.each(locals, function(index, item){
				//向ul中追加li元素内容
				if(item.done){
					$(".done ul").prepend("<li><input type='checkbox' checked='checked' /><p>"+ item.title +"</p><a href='javascript:;' i='"+ index +"'>X</a></li>");//此处的checkbox多一个属性checked='checked'
					done++;
				}else{
					$(".todo ul").prepend("<li><input type='checkbox' /><p>"+ item.title +"</p><a href='javascript:;' i='"+ index +"'>X</a></li>");//给a元素添加自定义属性名i，并将本地存储数据的下标号index作为属性值，这样后面删除数据时有用
					todu++;
				}									
			});
			$(".todo span").html(todu);
			$(".done span").html(done);
		}
		
		//删除本地存储数据（因为li元素是根据本地存储数据渲染的）
		$("ul").on("click", "a", function(){
			//1、先获取本地存储
			var locals=getData();
			//2、删除对应数据
			var index=$(this).attr("i");
			locals.splice(index, 1);
			//3、将剩下的数据保存到本地存储
			saveData(locals);
			//4、重新读取本地存储数据并渲染页面
			loadData();
		})
		
		//checkbox复选框操作
		$("ul").on("click", "input", function(){//必须要用$("ul")，不能用$("li"),否则只一次点击有效
			//1、先获取本地存储
			var locals=getData();
			//2、修改对应数据
			var index=$(this).siblings("a").attr("i");
			locals[index].done=$(this).prop("checked");
			console.log(index)
			//3、将修改后的数据保存到本地存储
			saveData(locals);
			//4、重新读取本地存储数据并渲染页面
			loadData();
		})
	</script>
</body>
</html>

最终浏览器的效果：
todolist截图

雨飞叶

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JQuery学习笔记“todolist”实战案例（对本地存储数据的操作）

最近学习了一个JQuery实战案例：todolist。主要是对localStorage本地存储数据的增、删、改、查操作与页面的渲染。综合性很强。现在把这个案例作为笔记放在网络上，就算忘记了，也可以随时联网打开，把源码复制过来，根据需求更改使用。有需要的朋友也可以参考一下哦。<!doctype html><html><head> <meta charset="utf-8"> <script type="text/javascript" src=
复制链接

扫一扫