2024年2月21日发(作者：)

DOM Storage

1. 概要

DOM Storage 是对storage-related特性集合的命名。它首先在Web

Application 1.0规范中引入。并且，目前被分割到它所属的W3C Web Storage规范中。DOM Storage被设计用来提供一个强大、安全和易于使用的以代替在cookies中存储信息的方式。 当前从Firefox2和Safari4开始，在基于Mozilla和WebKit的浏览器中可以使用DOM Storage。

2. 说明

通过DOM Storage机制提供的存储方式，可以将字符串的键-值对安全的存储起来并可在今后使用时检索出来。这种附加存储的目的是为交互式应用程序的建立提供了一种完全的方式(包括先进的性能、如应用程序能够在一定时期内离线工作)。

目前，基于Mozilla的浏览器、IE8、Safari4+和Chrome浏览器都提供了一个DOM Storage规范的实现机制。IE8之前的版本有一个称为”userData behavior”的类似特征，以允许用户在多个浏览器会话中持久化的存储数据。

DOM Storage是非常有用，因为仅存在浏览器的方法便可以随时完成持久化数据的存储。局限于浏览器中Cookies存储能力的限制，它不支持对持久化数据的管理，然而其它方法(如Flash Local Storage)却需要安装外部插件。Halfnote是由Aaron Boodman所编写的首次使用DOM Storage功能的公共程序之一。在Aaron Boodman的程序中，Aaron将记录同时保存到服务器和本地数据库中。这样，即使偶尔连接上网络时，便可以使得用户安全的写备份记录。

然而halfnote中提出的概念、实现是相对简单的。但是，DOM Storage的出现说明了可以在离线和在线时使用的新类型Web应用程序出现的可能性。

3. 参考

以下介绍的对象，都是作为window对象的属性而存在。这意味着它们可以通过使用sessionStorage或者nStorage来使用(这是很重要的，因为可以使用IFrames来存储、访问附加数据，而不是将这些数据包含在当前页面中)。

4. Storage

对于所有的Storage实体都存在一个构造方法(sessionStorage和globalStorage)。设置Key=function(key)

{ Item((key);} 将会在使用Key和Key时被访问。

globalStorage中的项不是Storage的实例，但却是StorageObsolete的实例。

Storage通过Storage Interface进行如下定义：

interface Storage{

readonly attribute unsigned long length;

[IndexGetter] DOMString key (in unsigned long index);

[NameGetter] DOMString getItem(in DOMString key);

[NameGetter] void setItem( in DOMString key, in DOMString data);

[NameGetter] void removeItem (in DOMString key);

Void clear();

}

注意：虽然可以通过使用标准的JavaScript属性来设置和读取值，但是并不

提倡使用getItem和setItem方法。在存储任何数据前都会调用其.toString()方法。当存储一个普通对象时会保存为字符串”[object Object]”，而不是这个对象或者其JSON的表示形式。因此，在存储对象类型的数据时，使用浏览器提供的本地JSON解析方法或序列化方法是一种较好的方式。

5. sessionStorage

sessionStorage是一个全局对象，它维护着一个页面会话的存储区域。一个页面会话开始于浏览器打开，并且持续到多个页面的加载。在浏览器中新打开一个页面时会导致新的会话产生。

m(“username”,”John”);

alert(“username=”+m(“username”));

sessionStorage对象在等待处理应该保存和浏览器刷新时的临时数据时是非常有用的。如下例所示：

var field = mentById(“field”);

if (m(“autosave”)) {

= m(“autosave”);

}

setInterval(function () {

m(“autosave”,);

},1000);

关于sessionStorage的更多参考信息，请查阅[1]。

6. globalStorage(非标准)

globalStorage是一个全局对象，它维护着多个私有区域，这些私有区域用来存储长时间内存在的数据。

注意：globalStorage不是Storage的一个实例，而是包含StorageObsolete对象的StorageList实例。

globalStorage[“”].setItem(“snippet”,”ok”);

特别来说，globalStorage对象提供了对一些不同storage对象的访问，这些storage对象存储着相关数据。例如，可以建立一个Web页面，并在当前域()中使用glogalStorage，可以获得以下有用的storage对象：

globalStorage[„‟] 全部及其子域内的web页面可以从这个storage对象中读写数据。

Firefox3注意事项：firefox2允许在比当前页面更高域层次上访问storage对象，但是在Firefox3中，为了安全因素，这将不再允许。另外，为了支持在Firefox3.5中实现的localstorage，这些除HTML5之外的意见已从HTML5规范中删除。

以下示例要求在每一个Web页面中都要存在一个所想展示结果的JavaScript。

保存当前正在访问的特定子域内的用户名称：

globalStorage[“”].setItem(“username”,”John”);

跟踪一个用户所访问域中全部页面的数目：

globalStorage[“”].setItem(“visits”,parseInt(globalStorage[“”].getIItem(“visits”)||0)+1);

7. localStorage

localStorage与globalStorage类似，区别在于所属HTML5的域，并且localStorage是Storage的一个实例，而globalStorage是StorageObsolete的一个实例。例如，不能访问 中相同的localStorage对象，但是它们可以访问相同的globalStorage项。localStorage是一个标准的接口，然而globalStorage是非标准接口。localStorage是在Firefox3.5中引入的。

注意：设置globalStorage的属性不会对localStorage属性的设置产生影响，并且通过扩展ype也不会影响globalStorage中的项。然而，使用ype扩展会对globalStorage中的项产生影响。当浏览器进入到私有浏览模式时，会建立一个新的临时数据库来存储storage数据。当私有浏览模式关闭时，便会将这个数据库删除。

8. 存储位置与数据清理

DOM Storage将数据存储在配置目录中的数据库文件中。通过打开浏览器的”工具->清理最近历史->Cookies”当时间范围为”Everything”时，会清除DOM Storage数据。

参考资料

1. /html5/webstorage/#the-sessionstorage-attribute