js给本地存储留言信息

前端-文龙刚

于 2022-12-15 10:14:28 发布

阅读量255

点赞数

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

本文链接：https://blog.csdn.net/qq_17211063/article/details/128325770

版权

Javascript 专栏收录该内容

84 篇文章 1 订阅

订阅专栏

最终效果是这样的，可以提交留言、查看留言以及删除留言

具体代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>本地存储demo1</title>
	<style type="text/css">
		*{margin:0;padding:0;list-style-type:none;}
		.box{padding:10px;margin:10px auto;width:600px;border:1px solid;}
		input{margin:0 auto 20px;width:90%;height:30px;line-height:30px;display:block;}
		textarea{margin:0 auto 20px;width:90%;height:50px;display:block;}
		.btn{margin:0 auto 20px;width:30%;height:30px;line-height:30px;display:inline-block;text-align:center;background-color:red;color:#fff}
		
		.msgList{margin-top:30px;background-color:#eee;}
		.msgList li{margin-bottom:10px;height:30px;line-height:30px;}
		label{float:left;display:block;}
		span{float:left;display:block;}
		.delete{float:right;}
	</style>
</head>
<body>
	<div class="box">
		<input class="name" type="text" name="" id="" value="" />
		<textarea class="msg" name="" rows="" cols=""></textarea>
		<a class="submit-btn btn" href="javascript:;">提交留言</a>
		<a class="showMsg-btn btn" href="javascript:;">查看留言</a>
		<a class="delete-btn btn" href="javascript:;">删除全部留言</a>
		
		<div class="msgList">
			<ul>
				
			</ul>
		</div>
	</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		//提交留言
		$('.submit-btn').click(function() {
			//取值
			var name = $('.name').val(),
				msg = $('.msg').val();
				
			if(name=='' || msg==''){
				alert('请完善信息');
				return false;
			}else{
				//存储值
				localStorage.setItem(name, msg);
				//展示信息
				msgShow();
				$('.name ,.msg').val('');
			}
			
		});
		//查看留言
		$('.showMsg-btn').click(function(){
			msgShow();
		});
		//删除全部留言
		$('.delete-btn').click(function(){
			localStorage.clear();
			$('.msgList ul').html('搜索数据已被清除')
		});
		//删除单个留言
		$('.msgList ul').on('click','.delete',function(){
			var del_name = $(this).parent().attr('data-name'); //prop()
			localStorage.removeItem(del_name);
			$(this).parent().remove();
		})
//		$('').on('click',function(){
//			
//		});
		//公共函数
		function msgShow() {
			var str = "";
			for(var i = 0; i < localStorage.length; i++) {
				var key = localStorage.key(i);
				var value = localStorage.getItem(key);
				str += '<li data-name="'+key+'">' +
					'<label for="">' + key + '：</label>' +
					'<span>' + value + '</span>' +
					'<a class="delete" href="javascript:;">删除</a>' +
					'</li>'
			}
			$('.msgList ul').html(str);
		}
	});
</script>