Jquery利用本地存储localStorage实现增删改查功能

lm778

已于 2022-10-11 09:21:24 修改

阅读量507

点赞数

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

于 2022-09-03 13:59:34 首次发布

本文链接：https://blog.csdn.net/m0_59798527/article/details/126675819

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper {
				width: 600px;
				margin: 0 auto;
			}

			.modal {
				width: 100%;
				height: 100vh;
				background-color: rgba(0, 0, 0, 0.5);
				position: absolute;
				display: none;
			}

			.modal .form {
				width: 500px;
				height: 300px;
				background-color: #fff;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				padding: 20px;
				box-sizing: border-box;
			}

			.modal .form input {
				width: 100%;
				height: 35px;
				margin-bottom: 20px;
			}

			.modal div span:nth-of-type(2) {
				float: right;
			}

			.modal .form div:nth-of-type(4) {
				width: 100%;
				text-align: center;
			}
		</style>
	</head>
	<body>

		<!-- 模态窗 -->
		<div class="modal">
			<div class="form">
				<!-- 隐式接收修改的id值用于修改 -->
				<input type="hidden" value="" class="active">
				<div><span>修改记录</span><span class="closeModal">X</span></div>
				<hr>
				<div><input type="text" class="username" placeholder="用户名"></div>
				<div><input type="password" class="pwd" placeholder="密码"></div>
				<div><button class="closeModal">关闭</button>&emsp;&emsp;<button class="addInfo">确认</button></div>
			</div>
		</div>
		<div class="wrapper">
			<div>
				<input type="search" value="">
				<button class="search">查询</button>
				<button class="add">增加</button>
			</div>
			<div class="tb">
				<table border="1" width="500">
					<thead>
						<tr>
							<th>id</th>
							<th>username</th>
							<th>password</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<!-- <tr>
							<td>1</td>
							<td>张三</td>
							<td>123456</td>
							<td>
								<button class="update">修改</button>
								<button class="del">删除</button>
							</td>
						</tr> -->
					</tbody>
				</table>
			</div>
		</div>
		<script src="../8-29/js/jquery-3.6.0.js"></script>
		<script>
			$(function() {
				// 点击事件
				$(".add").click(function() {
					//显示模态框
					openModal()
				})
				$(".closeModal").click(function() {
					//关闭模态框
					closeModal();
					
				})
				// 添加信息
				$(".addInfo").click(function() {
					// 添加函数调用
					var id = $(".active").val();
					console.log(id);
					if (id == "") {
						add(); //添加操作
					} else {
						//修改操作
						update(id)
					}
					//关闭模态框
					closeModal()
					//渲染
					show()
				})
				//删除信息
				$("tbody").on("click", ".del", function() {

					//得到id
					var id = $(this).parent().parent().children().eq(0).text();
					// 删除函数调用
					del(id);
					// 重新渲染
					show()

				})
				// 根据条件查询
				$(".search").click(function() {
					var keywords = $("input[type=search]").val();
					//查询后渲染
					show(keywords);
					//清空
					$("input[type=search]").val("");
				})


				// 修改信息
				$("tbody").on("click", ".update", function() {
					//显示模态窗
					openModal();
					//根据id获取对应的对象
					arr = localStorage.arr == undefined ? [] : JSON.parse(localStorage.arr);
					var id = $(this).parent().parent().children().eq(0).text();
					var arr = arr.find(obj => {
						return obj.id == id;
					})
					//反写
					$(".username").val(arr.name);
					$(".pwd").val(arr.password);
					$(".active").val(arr.id);

				})



				// 函数
				var arr = localStorage.arr == undefined ? [] : localStorage.arr;
				var nextId = localStorage.nextId == undefined ? 0 : localStorage.nextId * 1;

				//添加信息
				function add() {
					var arr = localStorage.arr == undefined ? [] : JSON.parse(localStorage.arr);
					var username = $(".username").val();
					var pwd = $(".pwd").val();
					//定义对象
					var obj = {
						id: nextId++,
						name: username,
						password: pwd,
					}
					//添加到本地存储
					console.log(arr);
					arr.push(obj);
					localStorage.arr = JSON.stringify(arr);
					//更新id
					localStorage.nextId = nextId;

				}
				//进入时渲染
				show()
				// 渲染函数
				function show(keywords) {
					$("tbody").html("")
					var arr = localStorage.arr == undefined ? [] : JSON.parse(localStorage.arr);
					if (keywords != undefined) {
						arr = arr.filter(function(obj) {
							return obj.name.includes(keywords);
						})

					}
					arr.forEach(function(obj) {
						$("tbody").append(` <tr>
						<td>${obj.id}</td>
						<td>${obj.name}</td>
						<td>${obj.password}</td>
						<td>
							<button class="update">修改</button>
							<button class="del">删除</button>
						</td>
					</tr>`)
					})
					$(".username").val("")
					$(".pwd").val("")
				}
				// 删除函数
				function del(id) {
					var arr = localStorage.arr == undefined ? [] : JSON.parse(localStorage.arr);
					var index = arr.findIndex(function(obj) {
						return obj.id == id
					})
					arr.splice(index, 1)
					localStorage.arr = JSON.stringify(arr)
				}

				//查询函数
				function search() {
					var arr = localStorage.arr == undefined ? [] : JSON.parse(localStorage.arr);
					var index = arr.findIndex(function(obj) {
						return obj.id == id
					})
				}
				//修改信息
				function update(id) {
					var arr = localStorage.arr == undefined ? [] : JSON.parse(localStorage.arr);
				var ary=arr.find(function(obj) {
						return obj.id == id
					})
					ary.name = $(".username").val();
					ary.password = $(".pwd").val();

					//重新更新到本地
					localStorage.arr = JSON.stringify(arr);
				}

				//打开模态框
				function openModal() {
					$(".modal").fadeIn();
				}
				//关闭模态框
				function closeModal() {
					$(".modal").fadeOut();
					$(".active").val("");
				}

			})
		</script>




	</body>
</html>