HTML5中的web存储

最新推荐文章于 2024-06-29 08:11:48 发布

wxiaojia

最新推荐文章于 2024-06-29 08:11:48 发布

阅读量2.4k

点赞数

分类专栏： HTML5 文章标签：前端web 数据存储 localStorage JSON

本文链接：https://blog.csdn.net/m0_37754657/article/details/79464810

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在html4及之前的版本中，通常使用cookie存储在用户的客户端，并随浏览器的请求一起发送到服务器的，它有一定的过期时间，过期后自动消失，也制约其发展的因素。

HTML5中增加了两种全新的数据存储方式：Web Storage和Web SQL Database.

Web Storage:可用于临时或永久保存客户端的少量数据，

Web SQL Database:客户端本地化的一套数据库系统，将大量的数据保存在客户端，而无需与服务器交互，极大减轻了服务器的压力，加快了其他页面浏览的速度。

一、WebStorage存储

相应的API类型分为两种：

sessionStorage（保存会话数据）
localStorage（在客户端长期保存数据）

1. sessionStorage 对象：保存数据时间非常短暂，因为该数据实质上是保存在session对象中。用户在打开浏览器时，可以查看操作过程中要求临时保存的对象，一旦关闭浏览器，所有使用sessionStorage对象保存的数据将全部丢失。

保存数据：sessionStorage.getItem(key,value);

对应格式为（键名，键值）。一旦键名设置成功，则不允许修改，也不能重复，若重复，会覆盖原有的键名值。

读取数据：sessionStorage.getItem(key); 返回一个指定键名对应的键值，如果不存在，则返回Null值。

<body>
	<fieldset>
		<legend>sessionStorage对象保存于读取临时数据</legend>
		<input type="text" name="txt" class="user_input" οnchange="txt_change(this);" size="30px">
		<input type="button" name="getValue" class="value" οnclick="getValue_click();" value="读取">
		<p id="statue"></p>
	</fieldset>
	<script>
		function $$(id){
			return document.getElementById(id);
		}
		function txt_change(v){
			var strName=v.value;
			sessionStorage.setItem("strName",strName);
			$$("statue").style.display="block";
			$$("statue").innerHTML=sessionStorage.getItem("strName");
		}
		function getValue_click(){
			$$("statue").style.display="block";
			$$("Statue").innerHTML=sessionStorage.getItem("strName");
		}
	</script>
</body>

ps:但重新打开网页时，原先sessionStorage对象保存的内容会全部丢失，所以当用户直接单击“读取”时，无法读取指定键名的键值。

2. localStorage对象：可以将数据长期保存在客户端，直至人工消除为止。

保存对象：localStorage.setItem(key,value);

读取对象：localStorage.getItem(key);

如果要清除对象保存的内容：localStorage.removeItem(key);

一旦成功，与键名对应的相应数据将全部被删除。

ps:尽管使用localStorage对象可以将数据长期保存在客户端，当在跨浏览器读取数据时，被保存的数据不可公用，即每一个浏览器只能读取各自浏览器中保存的数据，不能访问其他浏览器中保存的数据。

二、localStorage详解

1. 清除localStorage数据：如果要删除某个键名对应的记录，只需要调用removeItem()函数即可，但有时保存的数据很多，可以用：localStorage.clear();

表示清空全部的数据，一旦使用localStorage对象保存了数据，用户就可以在浏览器中打开相应的代码调试工具，查看每条数据对应的键名与键值，执行删除与清空操作后，其对应的数据也会发生变化，这些变化可以通过浏览器的代码调试工具进行侦查。

ps:各浏览器查看localStorage对象说保存的数据方式不完全相同，chrome10中，单击右键，选择“审查元素”，单击“resources”进行查看；firefox使用firebug调试工具作为存储查看器；Opera在页面中单击右键，选择“检查元素”，单击“本地资源”选项卡进行查看。

2.遍历localStorage数据

为了遍历localStorage这些数据，在遍历过程中，需要访问localStorage对象的另外两个属性：length与key，前者是对象中保存数据的总量；后者是保存数据时的键名项。其中，索引值以0开始。

<body οnlοad="getlocalData();">  
    <table id="ulMessage" border="1">  
	正在读取数据...  
    </table>  
    <p class="p4">  
	<textarea name="" id="content" cols="37" rows="5" class="inputtxt"></textarea><br>  
	<input type="button" id="add" value="发表" class="inputbtn" οnclick="add_click()"></input>  
    </p>  
    <script>  
	function $$(id){  
         	return document.getElementById(id);  
	}  
	//单击“发表”按钮时调用  
	function add_click(){  
		//获取文本框中的内容  
		var strContent=$$("content").value;  
		//定义一个日期型对象  
		var strTime=new Date();  
		//如果不为空，则保存  
		if(strContent.length>0){  
			var strKey="cnt"+RetRndNum(4);  
			var strVal=strContent+","+strTime.toLocaleTimeString();  
			localStorage.setItem(strKey,strVal);  
		}  
		//重新加载  
		getlocalData();  
		//清空原先内容  
		$$("content").value="";  
	}  
	//获取保存数据并显示在页面中  
	function getlocalData(){  
		//标题部分  
		var strHTML="<tr class='tr_h'>";  
		strHTML+="<td class='spn_a'>编号</td>";  
		strHTML+="<td class='spn_b'>内容</td>";  
		strHTML+="<td class='spn_c'>时间</td>";  
		strHTML+="</tr>";  
		// 内容部分  
		var strArr=new Array();//定义一数组  
		for(var intI=0;intI<localStorage.length;intI++){  
			//获取key值  
			var strKey=localStorage.key(intI);  
			//过滤键名内容  
			if(strKey.substring(0,3)=="cnt"){  
				var strVal=localStorage.getItem(strKey);  
				strArr=strVal.split(",");  
				strHTML+="<tr class='tr_c'>";  
				strHTML+="<td class='spn_a'>"+strKey+"</td> ";  
				strHTML+="<td class='spn_b'>"+strArr[0]+"</td>";  
				strHTML+="<td class='spn_c'>"+strArr[1]+"</td> ";  
				strHTML+="</tr>";  
			}  
		}  
		$$("ulMessage").innerHTML=strHTML;  
	}  
	//生成指定长度的随机数  
	function RetRndNum(n){  
		var strRnd="";  
		for(var intI=0;intI<n;intI++){  
			strRnd+=Math.floor(Math.random()*10);  
		}  
		return strRnd;  
	}  
	</script>  
</body>

3. 使用json对象存储数据

上面那种方式存储数据只能应对少量数据，为了解决这一问题，在html5中可以通过localStorage与JSON对象的转换，快速实现存储更多数据的功能。

如果将localStorage数据转成json对象，需调用json对象的parse()方法：

JSON.parse(data);

参数data表示localStorage对象获取的数据，该方法将返回一个装载data数据的json对象。还可通过stringify()，将一个实体对象转换成json格式的文本数据：

JSON.stringify(obj)

obj表示一个任意的实体对象，调用该方法将返回一个由实体对象转成JSON格式的文本数据集。

<body οnlοad="getlocalData();">
	<table id="ulMessage" border="1">
		正在读取数据...
	</table>
	<p class="p5">
		<span class="span1">
			学号：<input type="text"  readonly="true" id="txtStuID" class="inputtxt" size="10"><br>
			姓名：<input type="text" id="txtName" class="inputtxt" size="15">
		</span>
		<span class="spanr">
			性别：<select id="selSex">
					<option value="男">男</option>
					<option value="女">女</option>
				</select><br>
			总分：<input type="text" id="txtScore" class="inputtxt" size="8">
		</span>
		<p class="btn">
			<input type="text" id="btnAdd" class="inputbtn" value="增加" οnclick="add_click();">
		</p>

	</p>
	<script>
		function $$(id){
			return document.getElementById(id);
		}
		//单击“增加”按钮时调用
		function add_click(){
			var strStuID=$$("txtStuID").value;
			var strName=$$("txtName").value;
			var strSex=$$("selSex").value;
			var strScore=$$("txtScore").value;
			if(strName.length>0&&strScore.length>0){
				//定义一个实体对象，保存全部获取的值
				var setData=new Object;
				setData.StuID=strStuID;
				setData.Name=strName;
				setData.Sex=strSex;
				setData.Score=strScore;
				var strTxtData=JSON.stringify(setData);
				localStorage.setItem(strStuID,strTxtData);
			}
			//重新加载
			getlocalData();
			//清空原先内容
			$$("txtName").value="";
			$$("txtScore").value="";
		}
		//获取保存数据并显示在页面中
		function getlocalData(){
			//标题部分
			var strHTML="<tr>";
			strHTML+="<td class='spn_a'>学号</td>";
			strHTML+="<td class='spn_b'>姓名</td>";
			strHTML+="<td class='spn_c'>性别</td>";
			strHTML+="<td class='spn_d'>总分</td>";
			strHTML+="</tr>";
			//内容部分
			for(var intI=0;intI<localStorage.length;intI++){
				//获取key
				var strKey=localStorage.key(intI);
				//过滤键名内容
				if(strKey.substring(0,3)=="stu"){
					var getData=JSON.parse(localStorage.getItem(strKey));
					strHTML+="<tr class='tr_c'>";
					strHTML+="<td class='spn_a'>"+getData.StuID+"</td>";
					strHTML+="<td class='spn_b'>"+getData.Name+"</td>";
					strHTML+="<td class='spn_c'>"+getData.Sex+"</td>";
					strHTML+="<td class='spn_d'>"+getData.Score+"</td>";
					strHTML+="</tr>";
				}
			}
			$$("ulMessage").innerHTML=strHTML;
			$$("txtStuID").value="stu"+RetRndNum(4);
		}
		//生成指定长度的随机数
		function RetRndNum(n){
			var strRnd="";
			for(var intI=0;intI<n;intI++){
				strRnd+=Math.floor(Math.random()*10);
			}
			return strRnd;
		}
	</script>
</body>