HTML5 Web Storage：sessionStorage与localStorage实战-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36245314/article/details/103978691

本文探讨服务器与存储的关系，重点讲解HTML5中的sessionStorage和localStorage。介绍了它们的区别，如sessionStorage用于会话级别存储，数据在会话结束后消失，而localStorage则在浏览器关闭后仍保留数据。文章通过实现一个单词录入与测试的小游戏，阐述如何结合使用这两种存储方式，包括录入、测试和成绩展示的流程。

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

客户端浏览器存储做单词记忆测试

服务器与存储的关系

服务器与存储的关系

服务器可以是: 服务器主机+服务器存储(硬盘) 这时服务器跟存储是一体的。
另外,就是单独作为服务器的主机 ,服务器上的硬盘一般仅用来安全操系统,服务器就是服务器。
存储就是独立出来的设备 ,一般会以磁盘阵列、磁带库、小型环境的共享存储器等等。
今天要讲的这测试是客户端存储：
利用浏览器存储数据并且调用数据。

分类

之前最常用的存储：
cookie存储：通过发送请求，服务端返回一个cookieID存在浏览器缓存中，大小在4kb左右。这种存储方式占用了带宽也就是拖了网速。优点是浏览器通用。需要注意的是在ie6中，限制了每个域名只能有20个cookies。
讲到了ie 就不得不提userData 它是ie的59专用特性，flash的本地存储，空间是cookie的25倍！但是它被淘汰了。
ie有那谷歌Google自然也不会少了，Google的Gears存储大小没有任何限制，这就是一个非常强大的功能了吧，同时别的浏览器也能用！！可惜的是，别的浏览器使用的时候需要额外安装插件。就这一条，就注定了它不能被推崇开来。
还有IndexDB技术，客户端直接存储对象，目前还不是HTML的标准，它的大小也没有任何限制。
HTML5还有webstroage技术，使用简单，大小不能超过8mb，这已经很大了。

sessionStroage与localStorage

sessionStroage是会话级别的存储，存在当前会话中，会话结束时数据消失。
localStorage是跨会话存储，浏览器关闭后数据依然存在。今天我用这两种存储方式搭配使用写一个单词在线录入与测试的小游戏。

思路

先写一个单词可以重复录入的页面，两条输入框，一个存储中文，一个存储英文。录入成功时，清空输入框，可以继续录入新单词。随时可以开始测试。
测试界面动态获取存储到的所有单词只显示中文，并且中文后面跟上输入框，供测试者
输入与中文对应的英文。结束测试时进入成绩页面。
显示总题数，错题数和答对的题数。

上手吧

单词录入页

<style type="text/css">
			#box{
				width: 300px;
				height: 200px;
				border: 4px solid greenyellow;
				border-radius:12px ;
				margin: auto;
				/*font-size: 20px;*/
				text-align: center;
				background-color: rgba(187,220,252,.4);
			}
			a{
				text-decoration: none;
				color: deepskyblue;	
			}
			#btnsubmit{
				display: block;
				border: none;
				border-radius:3px ;
				color: #fff;
				width: 60px;
				height: 30px;
				margin: 15px auto -10px;
			}
			h3{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="box">
		<h3>单词录入</h3>
		英文：<input type="text" id="eng"/>
		<br />
		中文：<input type="text" id="chi"/>
		<br />
		<button onclick="fun()" id="btnsubmit">保存</button>
		<br />
		<a href="test.html">开始测试</a>
		</div>
		<script>
			function fun() {
				 var eng = document.getElementById('eng').value;
				 var chi = document.getElementById('chi').value;
				 if(document.getElementById('eng').value==""||document.getElementById('chi').value==""){
				 	alert("不能传入空值");
				 }else{
				 	localStorage[chi]=eng;
				 document.getElementById('eng').value="";
				 document.getElementById('chi').value="";
				 }
				 //localStorage["chinese"]=chi;
				}
		</script>
	</body>

单词测试页

<style type="text/css">
			#box{
				width: 300px;
				/*height: 200px;*/
				border: 4px solid greenyellow;
				border-radius:12px ;
				margin: auto;
				/*font-size: 20px;*/
				text-align: center;
				background-color: rgba(187,220,252,.4);
			}
			#btnsubmit{
				display: block;
				border: none;
				border-radius:3px ;
				color: #fff;
				width: 60px;
				height: 30px;
				margin: 5px auto;
			}
			h3{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h3>测试</h3>
			<div id="main">	
			</div>
			<input type="submit" id="btnsubmit" value="提交" />	
		</div>
		<script>
			if(sessionStorage.key!=null){
				console.log(111);
				sessionStorage.clear();
			}
			var main1=document.getElementById("main");
			for(var i=0; i<localStorage.length; i++){
				var key = localStorage.key(i)              //获取第i个key
				//var value = localStorage[key];     //获取第i个value
				
				main1.innerHTML+=`<span class="zhi"></span><input type="text"/ value=""><br/>`;
				var zhi1=document.getElementsByClassName("zhi")[i];
				zhi1.innerHTML=key+"：";
			}
			var iputs = document.getElementsByTagName("input");
			//var conts=0;
			var btnsubmit = document.getElementById("btnsubmit");
			btnsubmit.onclick = function(){
				var conts=0;
				for(var i=0; i<localStorage.length; i++){
					var key = localStorage.key(i);   
					//var values = localStorage[key];
					if(iputs[i].value!=localStorage[key]){
						conts++;
					}
			}
			console.log(conts);
			sessionStorage[key] = conts;
			location.href="result.html";
			}
			
		</script>

成绩页

<style type="text/css">
			#box{
				width: 300px;
				height: 200px;
				border: 4px solid greenyellow;
				border-radius:12px ;
				margin: auto;
				/*font-size: 20px;*/
				text-align: center;
				background-color: rgba(187,220,252,.4);
			}
			a{
				text-decoration: none;
				color: deepskyblue;
			}
			h3{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h3>测试结果</h3>
		总单词数：<span id="allwords"></span>
		<br />
		正确数量：<span id="truewords"></span>
		<br />
		错误数量：<span id="flasewords"></span>
		<br />
		<a href="save.html">继续录入新单词</a>
		<br />
		<a href="test.html">再次测试</a>
		</div>
		
		<script>
			var allwords=document.getElementById("allwords");
			var flasewords=document.getElementById("flasewords");
			var truewords=document.getElementById("truewords");
			var all=parseInt(localStorage.length);
			allwords.innerHTML=all;
			var key=sessionStorage.key(0); 
			var flases=parseInt(sessionStorage[key]);
			flasewords.innerHTML=flases;
			var trues=all-flases;
			truewords.innerHTML=trues;
//			console.log(all)
		</script>

测试完后还可以继续录入单词再次测试