HTML5分析实战Web存储机制(Web Storage)

　　Web Storage它是Key-Value在持久性数据存储的形式。Web Storage为了克服cookie把所引起的一些限制。当数据需要严格格控制client准时，没有必要不断地发回数据server。

Web Storage有两个目的：提供一种存储会话数据的路径;提供存储大量能够跨会话存在的数据的机制。

　　最初的Web Storage规范包括了两个对象的定义：sessionStorage对象和globalStorage对象。这两个对象在支持的浏览器中都是以window对象属性的形式存在。支持sessionStorage属性和globalStorage属性的浏览器有：Firefox 3.5+、Opera 10.5+、Chrome 4+和IE 8+。

当中Firefox 2和Firefox 3基于早期规范的内容部分实现了Web Storage。当时仅仅实现了globalStorage。没有实现localStorage。

　　1、Storage 类型

　　Storage类型提供了最大的存储空间(因浏览器而异)来存储名值对儿。

Storage的实例与其它对象类似，有以下几种方法。

　　clear()：删除全部值，Firefox中不支持。

　　gitItem(name)：依据指定的名字(name)获取相应的值。

　　key(index)：获得index位置处的值的名字(name)。

　　removeItem(name)：删除由name指定的名值对儿。

　　setItem(name, value)：为指定的name设置一个相应的值。

　　当中getItem()、removeItem(name)和setItem(name, value)方法能够直接调用，也能够通过Storage对象间接调用。由于每一个项目都是作为属性存储在该对象上的，所以能够通过点语法或者方括号语法訪问属性来读取值。

设置一样，或者通过delete操作符进行删除。只是，最好是用法进行调用而不是属性来訪问数据，以免重写对象造成的报错。

　　还能够使用length属性来推断有多少名值对儿放在storage对象中。但无法推断对象中全部数据的大小。Storage类型仅仅能存储字符串。非字符串的数据在存储之前会被转成字符串。

　　2、globalStorage对象

　　早在Firefox 2中就实现了globalStorage对象。

这个对象存在的目的就是为了跨越会话存储数据而生的，可是有特定的訪问限制。要使用globalStorage对象，首先要指定哪些与能够訪问该数据。

能够通过方括号标记使用属性。小样例例如以下

　　JavaScript代码

//保存数据
globalStorage["www.leemagnum.com"].name = "leemagnum";

//获取数据
var name = globalStorage["www.leemagnum.com"].name;

alert(name) //leemagnum

　　上面的样例必须在www.leemagnum.com域名以下才干訪问到，并且仅仅支持火狐3.6+。在这里，訪问的是针对”www.leemagnum.com”的存储空间。globalStorage对象不是Storage的实例，而详细的globalStorage[”www.leemagnum.com”]才是。这个存储空间对于”www.leemagnum.com”及其全部子域都能够訪问。某些浏览器同意更加宽泛的訪问限制，比方仅仅依据顶级域名进行限制或者同意全局訪问，小样例例如以下。

　　JavaScript代码

globalStorage["leemagnum.com"].name = "leemagnum1";
globalStorage["com"].name = "leemagnum2";
globalStorage[""].name = "leemagnum3";

　　上面这样是不支持的，无论是怎么訪问。都是不支持的。由于涉及到安全问题，所以不支持上面的方法。

当使用globalStorage对象的时候一定要制定域名。

　　对于globalStorage对象空间的訪问，是根据发起请求的页面的域名、协议和port来限制的。

比如比方使用HTTPS协议在”leemagnum.com”中存储了数据，那么通过HTTP訪问的”leemagnum.com”页面是不能訪问到这个数据的。通过80port訪问的页面无法与统一域名相同协议不同port訪问的页面共享数据的。

globalStorage对象的每一个属性都是Storage的实例。怎样使用就看以下的小样例吧

　　JavaScript代码

globalStorage["www.leemagnum.com"].name = "leemagnum";
globalStorage["www.leemagnum.com"].age = "12";

//删除数据
globalStorage["www.leemagnum.com"].removeItem("name");

//获取数据
var age = globalStorage["www.leemagnum.com"].getItem("age");

　　假设你实现不能确定域名。那么能够使用location.host作为属性名比較安全。

小样例例如以下

　　JavaScript代码

//保存数据
globalStorage[location.host].name = "leemagnum";

//获取数据
var age = globalStorage[location.host].getItem("age");

　　假设不使用removeItem()或者delete删除，或者用户未清除浏览器缓存。存储在globalStorage属性中的数据会一直保留在磁盘上。

这让globalStorage很适合在client存储文档或者长期保存用户偏好设置很有用。

　　3、localStorage对象

　　localStorage对象在HTML5规范中代替了globalStorage对象。与globalStorage对象不同的是，localStorage对象不能指定不论什么訪问规则。

localStorage訪问规则事先就设定好了。

要訪问同一个localStorage对象，页面必须来自同一个域名(子域名无效)，必须使用同一种协议，在同一个port上。这相当于globalStorage[location.host]。

　　由于localStorage对象是Storage的实例。所以能够像使用sessionStorage对象一样来使用它。小样例例如以下。

　　JavaScript代码

//用法存储数据
localStorage.setItem("name", "leemagnum");

//使用属性存储数据
localStorage.age = "12";

//用法读取数据
var name = localStorage.getItem("name");

//使用属性读取数据
var age = localStorage.age;

　　存储在localStorage对象中的数据和存储在globalStorage对象中的数据一样。都遵循一样的规则。数据保留到通过JavaScript删除或者用户清除浏览器缓存。为了兼容仅仅支持globalStorage的浏览器，能够使用一下函数。

　　JavaScript代码

function getLocalStorage (){
	if(typeof localStorage == "object"){
		return localStorage;
	}else if(typeof globalStorage == "object"){
		return globalStorage[location.host];
	}else{
		alert("你的浏览器不支持高级存储")
	}
}

　　然后，像以下这样调用一次这个函数，就能够正常读写数据了。

　　JavaScript代码

var storage = getLocalStorage();

　　在确定了使用哪个Storage对象之后，就能在全部支持Web Storage的浏览器中使用同样的存取规则操作数据了。

　　4、sessionStorage对象

　　sessionStorage对象像会话cookie仅仅保持到浏览器关闭。

存储在sessionStorage中的数据能够跨越页面刷新而存在，同事假设浏览器支持。浏览器崩溃并重新启动之后依旧可用(Firefox和Webkit都支持。IE不支持)。

　　由于sessionStorage对象绑定于某个server对话，所以当文件在本地执行的时候不可用。

存储在sessionStorage中的数据仅仅能通过最初给对象存储数据的页面訪问到。所以对多个页面应用是有限制的。

　　因为sessionStorage对象事实上是Storage的一个实例，所以使用setItem()或者直接设置新的属性来存储数据。

以下是存数数据的小样例

　　JavaScript

//用法存数数据
sessionStorage.setItem("name", "leemagnun");

//使用属性存储数据
sessionStorage.age = "12";

　　不同浏览器写入数据方面是不同的。Firefox和Webkit实现了同步写入，所以加入到存储空间中的数据是立马被提交的。

而IE的实现则是异步写入数据，所以在设置数据和将数据实现写入磁盘直接可能有一些延迟。对于少量数据而言，这个差异能够忽略的。对于大量数据。IE会比其它浏览器的速度会快一些。

　　在IE8中能够强制把数据写入磁盘：在设置数据之前使用begin()方法。而且在全部设置完毕之后调用commit()方法。小样例例如以下

　　JavaScript代码

//仅仅适用于IE8
sessionStorage.begin();
seesionStorage.name = "leemagnum";
sessionStorage.age = "12";
sessionStorage.commit();

　　这段代码确保了name和book的值在调用commit()之后立马被写入磁盘。

调用begin()方法是为了确保在这段代码运行的时候不会发生其它磁盘写入操作。

对于少量数据来说，这个过程并非必需的;可是对于大量数据而言。这方法是必需考虑的了。

　　sessionStorage对象中有数据时。能够用getItem()方法或者通过直接訪问属性名来获取数据。小样例例如以下

　　JavaScript代码

//用法存数数据
sessionStorage.setItem("name", "leemagnun");

//使用属性存储数据
sessionStorage.age = "12";

　　上面代码便利sessionStorage中的名值对儿的流程是这种：首先通过key()方法获取指定位置上的名字。然后通过getItem()方法找出相应这个名字的值。通过上面的for循环能够得到sessionStorage中的值也能够用for-in循环得到。小样例例如以下

　　JavaScript代码

//用法存数数据
sessionStorage.setItem("name", "leemagnun");

//使用属性存储数据
sessionStorage.age = "12";

var value = sKey ="";
for(i=0; i<sessionStorage.length; i++){
	sKey = sessionStorage.key(i);
	value = sessionStorage.getItem(sKey);
}
alert(sKey + " = " + value) //name = leemagnum

　　每次经过循环的时候，key被设置为sessionStorage中下一个名字。此时不会返回不论什么内置方法或者length属性。

　　要从sessionStorage对象中删除数据能够使用delete操作符删除对象属性，也能够调用removeItem()方法。小样例例如以下。

　　JavaScript代码

//使用for-in方法
var value = "";
for (var i in sessionStorage) {
	value = sessionStorage.getItem(i);
}
alert(i + " = " + value) //name = leemagnum

　　可是。在Webkit中delete操作符有可能会失效，所以要运用removeItem()方法比較妥当。

sessionStorage对象应该主要用于只针对会话的小段数据的存储。假设须要跨越会话存储数据，那么globalStorage对象或者localStorage对象比較适合。

　　5、Storage事件

　　对Storage对象进行不论什么改动，都会在文档上触发storage事件。通过属性或者setItem()方法保存数据，使用delete操作符或者removeItem()方法删除数据。或者调用clear()方法时，都会发生storage事件。

Storage事件的event对象的属性有下面几个：

　　domain：发生变化的存储空间的域名。

　　key：设置或者删除的键名

　　newValue：假设是设置值则是新值;假设是删除键则是null

　　oldValue：键被更改之前的值。

　　在这四个事件中。IE8和Firefox仅仅实现了domain事件。

老版本号的Webkit也不支持storage事件。storage事件的监听方法例如以下

　　JavaScript代码

document.addEventListener('storage',function(event){
	alert("发生变化的存储空间的域名是：  " + event.domain);
}, false);

　　不管是对sessionStorage对象、globalStorage对象还是localStorage对象进行操作，都会触发storage事件，但没有区分。

　　6、限制

　　Web Storage与其它client数据存储方案类似。Web Storage相同也有限制。这些限制因浏览器而异。

大多数都是对存储空间大小的限制是用每一个来源(协议、域和port)为单位的。也就是说每一个来源都有固定大小的空间用于保存自己的数据。

　　对于localStorage对象来说，大多数桌面浏览器会设置每一个来源5MB的限制。Chrome和Safari对每一个来源的限制都是2.5MB。

而iOS版Safari和Android版Webkit的限制也是2.5MB。

　　对于sessionStorage对象的限制也是因浏览器而异的。

有的浏览器对sessionStorage对象的大小没有限制。可是Safari、Chrome、iOS版Safari和Android版Webkit都有限制，都是2.5MB。

IE8+和Opera对sessionStorage对象的限制是5MB。

　　7、支持情况

　　Web Storage在浏览器中的支持情况：IE8+、Firefox 3.5+、Chrome 4.0+、Opera 10.5+、Android版Webkit和iOS版Safari。

　　8、综合小样例

　　HTML代码

<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
	<label for="user_name">姓名：</label>
	<input type="text" id="user_name" name="user_name" class="text"/>
	<br/>
	<label for="mobilephone">手机：</label>
	<input type="text" id="mobilephone" name="mobilephone"/>
	<br/>
	<input id="add" type="button" value="新增记录"/>
	<hr/>
	<label for="search_phone">输入手机号：</label>
	<input type="text" id="search_phone" name="search_phone"/>
	<input id="find" type="button" value="查找机主"/>
	<p id="find_result"><br/></p>
	<input id="delete" type="button" value="清除全部数据"/>
</div>
<br/>
<div id="list">
</div> 

　　JavaScript代码

window.onload = function(){
	var oAdd = document.getElementById("add"),
		oFind = document.getElementById("find"),
		oDelete = document.getElementById("delete");

	//保存数据
	oAdd.onclick = function(){
		var mobilephone = document.getElementById("mobilephone").value;
		var user_name = document.getElementById("user_name").value;
		localStorage.setItem(mobilephone,user_name);
	} 

	//查找数据
	oFind.onclick = function(){
		var search_phone = document.getElementById("search_phone").value;
		var name = localStorage.getItem(search_phone);
		var find_result = document.getElementById("find_result");
		find_result.innerHTML = search_phone + "的机主是：" + name;
	}

	//清除全部数据
	oDelete.onclick = function(){
		localStorage.clear();
		loadAll()
	};

	//将全部存储在localStorage中的对象提取出来。并展现到界面上
	loadAll()
	function loadAll(){ 

		var list = document.getElementById("list"); 

		if(localStorage.length>0){ 

			var result = "<table border='1'>"; 

			result += "<tr><td>姓名</td><td>手机号码</td></tr>"; 

			for(var i=0;i<localStorage.length;i++){
				var mobilephone = localStorage.key(i);
				var name = localStorage.getItem(mobilephone);
				result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";
			} 

			result += "</table>";
			list.innerHTML = result; 

		}else{
			list.innerHTML = "眼下数据为空，赶紧開始增加联系人吧";
		}
	}
};

　　HTML5实战与剖析之Web存储机制(Web Storage)就为大家介绍完了。Web Storage是进行数据持久性存储的。Web Storage是为了克服由cookie带来的一些限制而产生的。

Web Storage的产生算是一次数据存储的革命。

很多其它有关HTML5的相关知识尽在梦龙小站。

版权声明：本文博主原创文章。博客，未经同意不得转载。