《Javascript权威指南》学习笔记之十七：BOM新成就（1）--client存储数据（Storage实现）

时间 2019-11-18

标签 Javascript权威指南学习笔记十七 bom 成就 client 存储数据 storage 实现栏目 JavaScript 繁體版

原文原文链接

https://blog.csdn.net/u011043843/article/details/30255899 javascript

数据构成了web网站的实际内容。这些数据多种多样，可以是独立的文件，也可以是位于某个数据库文件或者数据库server之中。css

现在，HTML 5 BOM赞成在client实现较大规模的数据存储：一是web存储，二是Web SQL数据库存储。html

1、Web存储概述java

Web存储机制是一种经过字符串形式的key/value对来安全的存储和使用数据的方法。Web存储和HTTP Cookie的差异在于：web

一、容量不一样：Web存储容量大、更安全、更易于使用；Cookie存储容量有很是大的限制数据库

二、存储的持久性也不一样：Web存储是经过浏览器永久存储合理大小数据的数据方法，Cookie并无为存储永久性的数据提供支持。浏览器

2、Web存储的类型安全

一、在client存储数据的类型有下面两种：session

1.1 localStorage：本地存储。没有时间限制的数据存储。post

1.2 sessionStorage：会话存储，针对一个会话期的数据存储。

二、在client永久存储数据--建立Storage存储

localStorage存储的数据没有时间限制，可以永久使用。

var oStorage = window.localStorage;//返回一个Storage对象，可以调用相应的方法和属性
oStorage.book = "<b>javascript权威指南</b>"; //加入键值
//window.localStorage.book = "<b>javascript权威指南</b>";
//查看键值
if(oStorage.book)
{
	alert(oStorage.book);
}
else
{
	alert("键值不存在");
}

上图是google中的执行结果，中间图是google local storage存储的数据（ctrl+shift+i查看），下图是FF中的local storage存储的数据（ctrl+shift+k查看）

由于早期的FF没有显示localStorage，但是提供了globalstorage属性为指定域建立本地存储。可以用例如如下代码实现兼容：

var strDomain = "127.0.0.1";

var oStorage = window.localStorage? window.localStorage:window.globalStorage[strDomain];

var strDomain = "127.0.0.1";
try
{
	var oStorage = window.localStorage?window.localStorage:window.globalStorage[strDomain];
	if(oStorage.visitorCount)
	{
		oStorage.visitorCount = parseInt(oStorage.visitorCount,10)+1;
	}
	else
	{
		oStorage.visitorCount = 1;
	}
	document.write("欢迎你第<span style='font-weight:bold'>"+oStorage.visitorCount+"<\/span>次訪问");
}
catch(err)
{
	alert(err.message?
err.message:err.toString()); }

在Google中的执行结果

关闭浏览器后。localStorage存储仍然存在，但是sessionStorage存储仅在会话期存在。

三、在会话期存储数据---建立sessionStorage

sessionStorage针对一个Session进行的数据存储。当用户关闭浏览器后。数据就被删除。

window.sessionStorage返回当前页面会话期有效内建立的会话存储区域，仅仅要浏览器没有关闭。或者页面又一次加载或恢复。或从当前网页跳转到另一个页面。会话一直存在。

可以利用window.sessionStorage属性返回的Storage对象调用对象方法和属性。


<form action="?
" method="?"> <input name="myName" id="myName" type="text" onblur="javascript:oStorage.myNameValue = this.value;"/> <input name="mySubmit" type="submit"/> </form> <script type="text/javascript"> var oField = document.getElementById("myName"); var oStorage = window.sessionStorage; if(oStorage.myNameValue) {     oField.value = oStorage.myNameValue; } </script>

结果：

当用户输入有误，返回此页面又一次输入时。数据就被恢复。

3、Storage接口

HTML5规范了WindowSessionStorage和WindowLocalStorage接口，分别相应于SessionStorage和Localstorage的sessionStorage与localStorage属性。两者均返回Storage对象。

一、oStorage.length属性：获取key/value对的数量。

二、oStorage.key(index)：依据索引获取键名。返回键名的字符串形式或者空字符串。

PS：加入新键值对后，索引起生变化。

三、oStorage.getItem(skey):依据键名skey获取相应的键值。

键不存在。返回null。

PS：不能从不安全URL环境（HTTP）中读取和写入安全环境（HTTPS）内定义的键。

四、oStorage.clear()：清除所有的key/value对，包含存储空间。

五、oStorage.removeItem(skey):删除指定的键值对。skey是指定的键名。可以为空

六、oStorage.setItem(skey,svalue):加入或者更新键值对。

PS：不能从不安全URL环境（HTTP）中读取和写入安全环境（HTTPS）内定义的键。

七、storage事件：当存储区域发生变化时触发。可以用window.onstorage捕捉。若目标文档不处于活动状态则不会触发storage事件。上述方法中的4~6均会触发该事件。

storage事件对象的属性：

key:表示被更改的键；oldValue：表示被更改的键的旧值。newValue：表示被更改的键的新值。url：表示发生更改所在的网址。storageArea:表示发生更改坐在的Storage对象。（onstorage仅在IE9和Opera中实现）

<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>Storage</title>
</head>
<body style="font-family:'Microsoft YaHei','微软雅黑','SimSun','宋体'">
	<button onclick="javascript:setItem('user','yk');">设置user键</button>
	<button onclick="javascript:getItem('user');">显示user键</button>
	<button onclick="javascript:removeItem('user');">删除user键</button>
	<div id="myDiv" style="background:#EEE;width:315px;min-height:50px;padding:10px;border:2px dashed #ccc"></div>
	<script type="text/javascript">
		function storageHander(event)
		{
			var myDiv = document.getElementById("myDiv");
			myDiv.innerHTML = "存储发生了变化：<br/><b>"+event.key+"</b>键改变了<br/>旧值<b>"+event.oldValue+"</b>被改变为新值<b>"+event.newValue+"</b><br/>发生改变的网址:<b>"+event.url+"</b>";
		}
		window.onstorage = storageHander();

		var strDomain = "127.0.0.1";
		var oStorage;
		try
		{
			oStorage = window.localStorage?window.localStorage:window.globalStorage[strDomain];
		}
		catch(err)
		{
			alert(err.message?err.message:err.toString());
		}

		function setItem(key,value)
		{
			oStorage.setItem(key,value);
			alert("DOM Storage:"+key+"="+value);
		}
		function getItem(key)
		{
			var myDiv = document.getElementById("myDiv");
			myDiv.innerHTML = oStorage.getItem(key);
		}
		function removeItem(key)
		{
			oStorage.removeItem(key);
			alert("键"+key+"被删除了");
		}
	</script>
</body>
</html>

在IE中的执行结果：