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

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


评论(0)网络
阅读(1010)喜欢(0)JavaScript/Ajax开发技巧