上回我们在《JavaScript本地存储(2) : IE Only的userData》中提到了userData,当然这个存储方式只能支持IE系列的浏览器,从长远来看这种方法应该是被抛弃的,目前新技术发展很快,比如最新的HTML5技术,随之而来的是更为标准的JavaScript本地存储模式,那就是DOM Storage。更多的可以参考W3C的标准化文档《Web Storage》,其为我们提供了两种模式的本地存储,一个是sessionStorage,另一个是localStorage,今天我们先重点介绍localStorage。
同样的这两种存储模式都是基于标准的Storage接口的,其接口规范如下:
1 2 3 4 5 6 7 8 | interface Storage { readonly attribute unsigned long length; DOMString key(in unsigned long index); getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any value); deleter void removeItem(in DOMString key); void clear(); }; |
大家应该对这个非常熟悉,因为有些地方类似于我们在第一篇介绍的IStorage的接口方法,同样的基于这样的标准我们就可以很轻松的实现我们的IStorage接口了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var DOMStorage = function() { this.domStorage = null; this.domain = location.hostname; if (!this.domStorage) { this.domStorage = window.localStorage || window.globalStorage && window.globalStorage[this.domain]; } this.setItem = function(key, value) { this.domStorage.setItem(key, value); } this.getItem = function(key) { return this.domStorage.getItem(key); } this.remove = function(key) { this.domStorage.removeItem(key); } } |
大家可能奇怪,为什么会出现window.globalStorage这样的东东,原来localStorage只是FireFox 3.5及以上版本支持,对于低于这个版本的FireFox浏览器,我们可以用globalStorage变通一下,当然更详细的信息我们可以参考Mozilla的官方文档《DOM Storage》。下面只列出globalStorage的域功能,globalStorage有个域标识,相当于访问权限控制,具体如下。
- globalStorage[‘developer.mozilla.org’] 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。
- globalStorage[‘mozilla.org’] 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
- globalStorage[‘org’] 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
- globalStorage[”] 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。
肯定会有朋友问,IE支持localStorage么,据我所知,目前也只是IE8及以上版本支持localStorage,那么低于IE8版本的可以用globalStorage?答案是否定的,globalStorage貌似只有火狐支持,那么低于IE8版本的IE浏览器就没有办法了吗?哈,你忘记了我先前介绍的userData的IE专用办法了,关键时刻还是可以请它来帮忙的。
下一篇我将重点介绍如何整合这些存储方式。哦,对了,差点忘了sessionStorage,这个好理解,存储操作方式和localStorage一样,只不过sessionStorage是浏览器对话模式的,也就是说你关了浏览器就什么都没有了。
最后给出篇参考文章:《跨浏览器的本地存储(二):DOM:Storage》。