本地存储与交互式吐槽应用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_54139195/article/details/126677898

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/common.css">
		<style>
			.wrapper {
				width: 800px;
				height: 500px;
				margin: 100px auto;
				box-shadow:  0  0  5px 5px #EEEEEE;
			}

			.bt {
				width: 100%;
				height: 100px;
				background-color: #EEEEEE;
				line-height: 100px;
			}

			.bt p {
				font-size: 35px;
				font-weight: 500px;
				margin-left: 50px;

			}

			.box {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-around;

			}

			.box1 p {
				font-size: 14px;
				font-weight: 550;
				margin: 10px 0;
			}

			.box1 input {
				width: 265px;
				height: 25px;
				margin-bottom: 5px;

			}

			.tj {
				display: block;
				border: 1px solid lightgray;
				background-color: white;
				width: 50px;
				margin-left: 220px;
				margin-top: 15px;
			}

			.box2 {
				margin-top: 50px;
				width: 350px;
				height: 300px;
				overflow: auto;
			}
			.box2 ul{
				height: 1800px;
				
			}

			.box2 li {
				width: 300px;
				font-size: 13px;
				border: 1px solid lightgrey;
				padding: 10px;
				border-radius: 5px;
			}

			.box2 li span {
				font-size: 16px;
			}

			.del {
				display: inline-block;
				border: none;
				background-color: #EEEEEE;
				color: black;
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="bt">
				<p>欢迎来到吐槽大厅</p>
			</div>
			<div class="box">
				<div class="box1">
					<p>用户名</p>
					<input type="text" name="" class="yhm" placeholder="用户名">
					<p>吐槽内容</p>
					<textarea class="nr" cols="35" rows="4" placeholder="吐槽内容"></textarea>
					<button class="tj">提交</button>
				</div>
				<div class="box2">
					<h3>吐槽回复:</h3>
					<ul>
						<!-- <li>
							<b>tom</b><span>说</span>:<b>妈妈我想吃烤山药</b>
							<button class="del">删除</button>
						</li> -->

					</ul>
				</div>
			</div>
		</div>
		<script src="./js/jquery-3.6.0.js"></script>
		<script>
			$(function() {
				// 1、获取数组
				var ary = localStorage.ary == undefined ? [] : JSON.parse(localStorage.ary);
				$(".tj").click(function() {
					// 获取input textarea
					var inputs = $(".yhm").val();
					var nr = $(".nr").val();
					// 封装对象
					var obj = {
						yhm: inputs,
						nr: nr
					}
					console.log(obj);
					//2、向数组添加最新的数据
					ary.push(obj);
					//3、本地存储更新
					localStorage.ary = JSON.stringify(ary);
					//4、渲染页面
					//5、清空textarea
					$(".yhm").val("");
					$(".nr").val("");
					show();
				})

				// 渲染页面
				show(); //第一次进入页面调用
				function show() {
					$("ul").html("");
					ary = localStorage.ary == undefined ? [] : JSON.parse(localStorage.ary);
					ary.forEach(obj => {
						$("ul").prepend(`<li>
							<b>${obj.yhm}</b><span>说</span>:<b>${obj.nr}</b>
							<button class="del">删除</button>
						</li>`)
					})
				}
				$("ul").on("click", ".del", function() {
					if (confirm("确认删除吗？")) {
						ary = localStorage.ary == undefined ? [] : JSON.parse(localStorage.ary);
						//获取对应标题
						var id = $(this).parent().children().eq(0).html();
						console.log(id);
						var index=ary.findIndex(obj=>{
							return obj.yhm==id;
						})
						ary.splice(index, 1);
						localStorage.ary = JSON.stringify(ary);
						show();
					}
				})
			})
		</script>
	</body>
</html>

本地存储（全网最详解析）