【jQuery】利用本地存储实现简单的todolist，刷新数据不会消失

最新推荐文章于 2024-01-16 20:20:56 发布

1024A

最新推荐文章于 2024-01-16 20:20:56 发布

阅读量326

点赞数

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

本文链接：https://blog.csdn.net/qq_58309844/article/details/126636518

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

jquery利用本地存储实现简单的todolist，刷新数据不会消失

文章目录

一、展现效果
二、实现代码

一、展现效果

在这里插入图片描述

二、实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="wrapper">
			<input type="text"><button class="add">添加</button>
			<div class="list">

			</div>
		</div>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function() {
				//1、获取数组
				var ary = localStorage.ary == undefined ? [] : JSON.parse(localStorage.ary)
				$(".add").click(function() {
					//2、向数组添加最新的数据
					ary.unshift($("input").val());
					//3、本地存储更新
					localStorage.ary = JSON.stringify(ary);
					//4、渲染页面
					show();
					//5、清空input
					$("input").val("");
				})

				//渲染页面
				show(); //第一次进入页面调用
				function show() {
					$(".list").html("");
					ary = JSON.parse(localStorage.ary);
					ary.forEach(item => {
						$(".list").append(`<p><span>${item}</span><button class="del">X</button></p>`)
					})
				}

				//删除
				$(".list").on("click", ".del", function() {
					//获取对应标题
					var title = $(this).prev().html();
					var index = ary.indexOf(title);
					//删除当前数据
					ary.splice(index, 1);
					// 本地存储更新
					localStorage.ary = JSON.stringify(ary);
					//渲染页面
					show();
				})

			})
		</script>
	</body>
</html>