dklogs

DOM Storage是在网络客户端存储键值对数据的一个标准。这使离线的网络应用的开发变得更加实际和简单。

跟它看起来非常相似的另外一个就是cookies了，但是它在某些方面比cookies有很大的优势。

o
1. 更大的存储空间。cookies的大小大约限制在4KB左右，而DOM Storage则在10MB左右，实用性大大提高。

o

2. 能够真正的持久化到本地。cookies并没有提供永久持久化到本地的方法，它总是会过期，而DOM Storage则没有这个问题。

o

3. 效率更高。cookies是需要发回服务器端的，而DOM Storage则不会。

o

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对象的属性和方法

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

o

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

o

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

o

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

o

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

o

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

o

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

o

• setItem 方法
  设置键/值对。

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

o
• 属性
  expires 属性
  XMLDocument 属性

o

• 方法
  getAttribute 方法
  load 方法
  removeAttribute 方法
  save 方法
  setAttribute 方法

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

废话不多说，上代码

Source code

(
function(w){
ovar isSupportLocalStorage = !!window.localStorage, isSupportBehavior = false;
oif(!isSupportLocalStorage){
ovar dataObj = document.createElement('input');
odataObj.type = 'hidden';
odocument.body.appendChild(dataObj);
oisSupportBehavior = !! dataObj.addBehavior;
oisSupportBehavior && dataObj.addBehavior('#default#userData');
 
o}
ovar configs = {
ostoreName: 'editorContent'
o};
ow.storage = {
oretrieve: function(name){
oif(!isSupportLocalStorage && isSupportBehavior){
odataObj.load(configs.storeName);
oreturn dataObj.getAttribute(name);
o}else{
oreturn w.localStorage.getItem(name);
o}
oreturn null;
o},
osave: function(name, value){
oif(!isSupportLocalStorage && isSupportBehavior){
odataObj.setAttribute(name, value);
odataObj.save(configs.storeName);
oreturn true;
o}else{
ow.localStorage.setItem(name, value);
oreturn true;
o}
oreturn false;
o}
o};
})(window);

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

引用内容

http://dev.w3.org/html5/webstorage/#user-tracking

https://developer.mozilla.org/en/DOM/Storage

http://msdn.microsoft.com/zh-cn/library/cc197062%28v=vs.85%29.aspx

http://msdn.microsoft.com/en-us/library/ms531424%28v=vs.85%29.aspx

———-

o
1. 修正代码中一处笔误，window.localStroage订正为window.localStorage

o

2. IE8和IE9下无法触发onstorage事件，FireFox下需对window对象绑定storage事件，可触发。

转载请注明原文出处《JavaScript本地存储(DOM Storage,Local Storage)》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。