JavaScript本地存储(DOM Storage,Local Storage)

　　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的存取，让这个对象在保持兼容的同时使用起来也能够更加方便。

　　废话不多说，上代码

<script>
    (function (w) {
        var isSupportLocalStorage = !!window.localStorage, 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("abc", "abc键的值");
    alert(storage.retrieve("abc"))
</script>

　　使用很方便，直接调用即可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

———-

1. 修正代码中一处笔误，window.localStroage订正为window.localStorage
2. IE8和IE9下无法触发onstorage事件，FireFox下需对window对象绑定storage事件，可触发。

　　设计制作：DK 转载请注明出处：http://www.dklogs.net

加支付宝好友偷能量挖...