码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-10-16 20:26:12      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:

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






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

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

标签:

原文地址:http://www.cnblogs.com/mengfanrong/p/4886079.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!