HTML5学习第12篇——本地存储综合示例

最新推荐文章于 2022-11-24 17:17:19 发布

水晶果冻1125

最新推荐文章于 2022-11-24 17:17:19 发布

阅读量288

点赞数

CC 4.0 BY-SA版权

分类专栏： # HTML5 文章标签： html5 本地存储监听storage

本文链接：https://blog.youkuaiyun.com/m0_37617778/article/details/84875473

HTML5 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的学生信息管理系统，该系统能够添加、保存和展示学生信息，利用本地存储技术进行数据持久化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、功能描述

编写学生信息添加页面，利用本地存储保存学生信息，并从本地存储中读取学生信息以列表形式展示。

添加学生信息-》存储学生信息-》展示学生信息

2、实现代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>本地存储练习</title>
	<style type="text/css">
		body{
			margin:0px;
			padding: 0px;
			background-color: #F0F0F0;
			font-family:"微软雅黑";
			font-size: 22px;			
		}

		.content{
			width: 560px;
			margin:50px 30px;
			border: 1px solid #2E2D2D;
			padding: 10px 30px;
			float:left;
		}

		.title{
			position: relative;
			top:-26px;
			left: 0px;
			background-color: #F0F0F0;
			z-index: 1;
			font-size: 28px;
		}

		label{
			line-height: 30px;
			display: block;
			margin-bottom:10px;
		}
		
		input{
			font-size: 20px;
			line-height: 40px;
			width: 100%;
			margin-bottom: 10px;
		}

		.btn{
			width: 49%;
			height: 40px;
			background-color: #1EB24E;
			margin: 10px auto;
			color:white;
			font-size: 20px;
		}

		.list{
			width: 560px;
			float: right;
			margin:50px 30px;
			padding: 10px 10px;
			border: 1px solid #2E2D2D;
		}

		.userTable{
			width: 100%;
			border: 1px solid #CCC;
			border-collapse:collapse;
		}

		caption{
			font-weight: blod;
			font-size: 28px;
			margin-bottom: 10px;
		}

		.userTable tr{
			 border: 1px solid #CCC;
		}

		.userTable th,td{
			text-align: center;
			border: 1px solid #CCC;
		}

	</style>
</head>
<body>
	<div class="content">
		<span class="title">学生档案</span>
		<label>姓名：</label>
		<input type="text" name="name" autofocus="autofocus" placeholder="请输入姓名">
		<label>性别:</label>
		<input type="text" name="sex" placeholder="请输入性别">
		<label>年龄：</label>
		<input type="text" name="age" placeholder="请输入年龄">
		<button class="btn btn_save">保存</button>
		<button class="btn btn_reset">重置</button>
	</div>
	<div class="list">
		<table class="userTable">
		</table>
	</div>

	<script type="text/javascript">
		loadUserList();
		//保存学员信息
		var btnSave = document.querySelector('.btn_save');
		btnSave.onclick = function(){
			var name = document.querySelector('input[name=name]').value;
			var sex = document.querySelector('input[name=sex]').value;
			var age  = document.querySelector('input[name=age]').value;

			//console.log(name);
			//创建user对象，并为属性赋值
			var user = new Object();
			user.name = name;
			user.sex = sex;
			user.age = age;

			var arr;

			//检测本地存储中是否已存在key值
			if(localStorage.getItem("users")){
				//根据key值获取vlaue
				arrStr = localStorage.getItem("users");
				//值以字符串的方式进行存储，将其转换为对象
				arr = JSON.parse(arrStr);
				//alert(typeof arr);
				//alert(arr instanceof Array);
			}else{
				//本地存储中没有键的时候，创建存储数组
				arr = new Array();
			}
			//将对象内容追加到数组中
			arr.push(user);	
			//将数组对象转换为字符串对象
			var str = JSON.stringify(arr);
			//保存用户对象
			localStorage.setItem("users",str);

			loadUserList();

			alert("保存成功");
		};

		//内容重置
		var btnReset = document.querySelector('.btn_reset');
		btnReset.onclick = function(){
			document.querySelector('input[name=name]').value = '';
			document.querySelector('input[name=sex]').value = '';
			document.querySelector('input[name=age]').value = '';
		};

		//当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发
		//很容易犯的错误是，在同一个网页修改本地存储，又在同一个网页监听，这样是没有效果的。
		//因此以下代码不能执行		
		window.addEventListener('storage',function(event){
			//在 Web Storage 区域更新后运行的脚本。本地存储发生变化后刷新学生列表
			alert();
			//1、event.key:这个是 被修改的数据键值
			//2、event.oldValue :  被修改前的值
			//3、enent.newValue:被修改后的值
			
			/*if(event.key == "users"){
				console.log(event.newValue);
				loadUserList();
			}*/
		});

		//加载本地存储数据，显示学生列表
		function loadUserList(){
			var arrStr = localStorage.getItem("users");
			var arr = JSON.parse(arrStr);
			if(arr instanceof Array && arr.length >0){
				var str = '<caption>学生信息</caption>'+
							'<tr>'+
								'<th>序号</th>'+
								'<th>姓名</th>'+
								'<th>性别</th>'+
								'<th>年龄</th>'+
								'<th>操作</th>'+
							'</tr>';				
				for (var i = 0; i <= arr.length - 1; i++) {
				  var user =  arr[i];
				  str =  str +
					'<tr>'+
					'<td>'+(i+1)+'</td>'+
					'<td>'+user.name+'</td>'+
					'<td>'+user.sex+'</td>'+
					'<td>'+user.age+'</td>'+
					'<td><a href="javascript:void(0);">删除</a></td>'+
					'</tr>';
				};

				document.querySelector('.userTable').innerHTML = str;
			}
		}

	</script>
</body>
</html>

3、页面效果

4、小结

页面中左侧的学生档案部分的代码可以优化实现，表单外围的边框和标题可以用<fieldset>和<legend>

<fieldset> 标签用于从逻辑上将表单中的元素组合起来。

<fieldset> 标签会在相关表单元素周围绘制边框。

<legend> 标签为 fieldset 元素定义标题。

legend 元素为以下元素定义标题（caption）：<fieldset>、<figure>、<details>。

代码如下：

<form action="">
  <fieldset>
    <legend>学生档案</legend>
    <label for="">
      姓名: <input type="text" name="name" autofocus placeholder="请输入姓名">
    </label>
    <label for="">
      性别: <input type="text" name="sex" autofocus placeholder="请输入性别">
    </label>
    <label for="">
      年龄: <input type="text" name="age" autofocus placeholder="请输入年龄">
    </label>
    <label for="" class="btn">
      <input type="submit" value="保存" id="sm">
    </label>
    <label for="" class="import">
      <input type="file">
    </label>
  </fieldset>
</form>

本地存储监听事件onStorage 不能监听同源页面的localStorage修改，之前想实现通过监听修改，动态刷新列表的功能，调试了好久发现一直都不生效，百度之后才发现不能监听同源页面的localStorage修改。

很容易犯的错误：在同一个网页修改本地存储，又在同一个网页监听，这样是没有效果的。

若想实现该功能，则需要重写监听事件

<!DOCTYPE html>
<html>
<head lang="en">
    <title>A</title>
</head>
<body>
<script>
    var orignalSetItem = localStorage.setItem;
    localStorage.setItem = function(key,newValue){
        var setItemEvent = new Event("setItemEvent");
        setItemEvent.newValue = newValue;
        window.dispatchEvent(setItemEvent);
        orignalSetItem.apply(this,arguments);
    }
    window.addEventListener("setItemEvent", function (e) {
        alert(e.newValue);
    });
    localStorage.setItem("nm","1234");
</script>
</body>
</html>