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的相关知识尽在梦龙小站。
版权声明：本文博主原创文章。博客，未经同意不得转载。
