HTML5 本地存储(转)

DOM Storage是在网络客户端存储键值对数据的一个标准。这使离线的网络应用的开发变得更加实际和简单。跟它看起来非常相似的另外一个就是cookies了，但是它在某些方面比cookies有很大的优势：

(1) 更大的存储空间。cookies的大小大约限制在4KB左右，而DOM Storage则在10MB左右，实用性大大提高。能够真正的持久化到本地。

(2) cookies并没有提供永久持久化到本地的方法，它总是会过期，而DOM Storage则没有这个问题。效率更高。

(3) cookies是需要发回服务器端的，而DOM Storage则不会。

(4) 接口更加标准，使用更加简单。相信cookie在javascript中的操作有多麻烦大家都是非常清楚的，而DOM Storage则需跟json一样操作即可。

当然它同样也有一些缺点，比如安全和隐私方面可能控制的不是那么好，它的存储是明文的并未经过加密，可以比较容易的获取存储的信息。

无论如何，DOM Storage所具有的特性都是让人十分振奋的。但是（总会有但是），虽然目前的各个浏览器的新版本都支持这一特性，IE6和IE7仍然不支持，IE8已支持。不要沮丧，虽然IE6是个让人蛋疼的浏览器，但是考虑一下它的出生日期你会觉得它已经很神奇了。IE6中可以通过userData Behavior来实现类似的能力。当然限制多了一些，因特网的存储空间只有1MB左右，不过有总比没有强。

下面介绍一下DOM Storage的一些熟悉和方法。DOM Storage包括两种对象：sessionStorage和localStorage：

sessionStorage对象：在一个页面会话有效期内可以使用的存储对象。

localStorage对象：可以跨多个窗口，多个会话，也可以为域提供持久性存储。

每个域和子域都具有自己单独的本地存储区域。域可以访问子域的存储区域，而子域也可以访问父域的存储区域。例如， localStorage['example.com'] 可由 example.com 及其任何子域访问。子域

localStorage['www.example.com'] 可由 example.com 访问，但不能由其他子域访问，如 mail.example.com。

Storage对象的属性和方法：

clear 方法：从 DOM 存储区域中移除所有键/值对。

constructor 属性：返回对对象的构造函数的引用。

getItem 方法：检索与 DOM 存储键关联的当前值。

key 方法：检索集合中指定索引处的键。

length 属性：检索键/值列表的长度。

remainingSpace 属性：检索可用于存储对象的剩余内存空间

removeItem 方法：从 DOM 存储集合中删除键/值对。

setItem 方法：设置键/值对。

IE6和IE7下是通过userData Behavior是实现的，它需要用到behavior这个IE下私有的属性。它有一下属性和方法：

expires 属性

XMLDocument 属性

getAttribute 方法

load 方法

removeAttribute 方法

save 方法

setAttribute 方法

手册介绍的差不多了，光是罗列这些手册没啥用处，为了方便使用我这里封装了一个对象用于localStorage的存取，让这个对象在保持兼容的同时使用起来也能够更加方便。

废话不多说，上代码(?????????????)：

(function(w){
	var isSupportLocalStorage =!!window.localStroage, isSupportBehavior = false;
	if(!isSupportLocalStorage){
		var dataObj = document.createElement('input'); 
		dataObj.type='hidden'; 
		document.body.appendChild(dataObj); 
		isSupportBehavior =!! dataObj.addBehavior; 
		isSupportBehavior && dataObj.addBehavior('#default#userData'); 
	}
	var configs ={ storeName:'editorContent'};
	w.storage={ 
		retrieve:function(name){
			if(!isSupportLocalStorage && isSupportBehavior){ 
				dataObj.load(configs.storeName);
				return dataObj.getAttribute(name);
			}else{
				return w.localStorage.getItem(name);
			}
			return null;
		}, 
		save:function(name, value){
			if(!isSupportLocalStorage && isSupportBehavior){
				dataObj.setAttribute(name, value); 
				dataObj.save(configs.storeName);
				return true;
			}else{ 
				w.localStorage.setItem(name, value);
				return true;
			}
			return false;
		}
	};
})(window);

使用很方便，直接调用即可storage.save(name, value) / storage.retrieve(name)。

HTML5 本地存储(转)

相关推荐