HTML5实战与剖析之Web存储机制(Web Storage)

　　Web Storage是以Key-Value的形式进行数据持久性存储。Web Storage是为了克服由cookie带来的一些限制而产生的。当数据需要被严格控制在客户端上的时候，无须持续地将数据发回服务器。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对象空间的访问，是依据发起请求的页面的域名、协议和端口来限制的。例如比如使用HTTPS协议在”leemagnum.com”中存储了数据，那么通过HTTP访问的”leemagnum.com”页面是不能访问到这个数据的。通过80端口访问的页面无法与统一域名同样协议不同端口访问的页面共享数据的。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非常适合在客户端存储文档或者长期保存用户偏好设置非常实用。

　　3、localStorage对象

　　localStorage对象在HTML5规范中取代了globalStorage对象。与globalStorage对象不同的是，localStorage对象不能指定任何访问规则。localStorage访问规则事先就设定好了。要访问同一个localStorage对象，页面必须来自同一个域名(子域名无效)，必须使用同一种协议，在同一个端口上。这相当于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对象绑定于某个服务器对话，所以当文件在本地运行的时候不可用。存储在sessionStorage中的数据只能通过最初给对象存储数据的页面访问到，所以对多个页面应用是有限制的。

　　由于sessionStorage对象其实是Storage的一个实例，所以使用setItem()或者直接设置新的属性来存储数据。下面是存数数据的小例子

　　JavaScript

//使用方法存数数据sessionStorage.setItem("name", "leemagnun");//使用属性存储数据sessionStorage.age = "12";

　　不同浏览器写入数据方面是不同的。Firefox和Webkit实现了同步写入，所以添加到存储空间中的数据是立刻被提交的。而IE的实现则是异步写入数据，所以在设置数据和将数据实现写入磁盘直接可能有一些延迟。对于少量数据而言，这个差异可以忽略的。对于大量数据，IE会比其他浏览器的速度会快一些。

　　在IE8中可以强制把数据写入磁盘：在设置数据之前使用begin()方法，并且在所有设置完成之后调用commit()方法。小例子如下

　　JavaScript代码

//只适用于IE8sessionStorage.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与其他客户端数据存储方案类似，Web Storage同样也有限制。这些限制因浏览器而异。大多数都是对存储空间大小的限制是用每个来源(协议、域和端口)为单位的。也就是说每个来源都有固定大小的空间用于保存自己的数据。

　　对于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的相关知识尽在梦龙小站。