JavaScript本地存储(3) : DOM Storage

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

上回我们在《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》

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!
请稍后...

发表评论

电子邮件地址不会被公开。 必填项已用*标注