Storage

概述

DOM存储是一套在Web Applications 1.0 规范中首次引入的与存储相关的特性的总称, 现在已经分离出来,单独发展成为独立的W3C Web存储规范. DOM存储被设计为用来提供一个更大存储量,更安全,更便捷的存储方法,从而可以代替掉将一些不需要让服务器知道的信息存储到cookies里的这种传统方法.该特性在Firefox 2 和 Safari 4中首次引入.

描述

DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间).

基于Mozilla的浏览器, Internet Explorer 8+, Safari 4+ 以及 Chrome 都提供了自己的DOM存储规范的实现. (如果你想让自己的代码兼容多个浏览器,则你需要照顾一下老版本的IE浏览器,IE下有一个类似的特性,在IE8之前版本也可以使用,叫做"userData behavior",它允许你在多重浏览器会话中永久地保存数据.)

DOM存储很有用，因为在浏览器端没有好的方法来持久保存大量数据。浏览器cookie的能力有限，而且不支持组织持久数据，其他方法（如flash本地存储）需要外部插件支持。

由Aaron Boodman编写的halfnote（笔记类应用程序）是第一批使用新的DOM存储功能（不包括internet explorer的userData behavior）开发的公开应用程序之一。在这个应用里，Aaron同时将笔记保存到服务器（当网络可用时）和本地，这允许使用者即使在不稳定的网络环境下也能安全的记录备注事项。

虽然halfnote的理念和实现比较简单，但是halfnote的创新展示了一种在线上和线下都可用的新型web应用的可能性。

参考

以下所提到的对象都是全局对象，作为 window 对象 的属性存在。这意味着可以以 sessionStorage 或者 window.sessionStorage 的形式访问这些对象。(这点很重要，因为可以使用iframe来存储、访问除了直接包含在页面的数据之外的附加数据。)

Storage

它是所有Storage实例（sessionStorage和globalStorage[location.hostname]）的构造函数，设置Storage.prototype.removeKey = function(key) { this.removeItem(this.key(key)) }，可通过localStorage.removeKey 和 sessionStorage.removeKey访问到。

globalStorage对象不是Storage的实例，而是StorageObsolete的一个实例。

Storage被定义在WhatWG Storage Interface 中,如下:

interface Storage {
  readonly attribute unsigned long length;
  [IndexGetter] DOMString key(in unsigned long index);
  [NameGetter] DOMString getItem(in DOMString key);
  [NameSetter] void setItem(in DOMString key, in DOMString data);
  [NameDeleter] void removeItem(in DOMString key);
  void clear();
};

sessionStorage

sessionStorage 是个全局对象，它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。 

// 保存数据到当前会话的存储空间
sessionStorage.setItem("username", "John");
// 访问数据
alert( "username = " + sessionStorage.getItem("username"));

当浏览器被意外刷新的时候，一些临时数据应当被保存和恢复。sessionStorage 对象在处理这种情况的时候是最有用的。

例子:

自动保存一个文本域中的内容，如果浏览器被意外刷新，则恢复该文本域中的内容，所以不会丢失任何输入的数据。

 // 获取到我们要循环保存的文本域
 var field = document.getElementById("field");
 // 查看是否有一个自动保存的值
 // (只在浏览器被意外刷新时)
 if ( sessionStorage.getItem("autosave")) {
    // 恢复文本域中的内容
    field.value = sessionStorage.getItem("autosave");
 }
 // 每隔一秒检查文本域中的内容
 setInterval(function(){
    // 并将文本域的值保存到session storage对象中
    sessionStorage.setItem("autosave", field.value);
 }, 1000);

更多信息:

• sessionStorage specification

localStorage

localStorage is the same as sessionStorage with same same-origin rules applied but it is persistent. localStorage was introduced in Firefox 3.5.

兼容性

这些 Storage 对象最近刚被加入标准当中，所以并不是所有的浏览器都支持。如果你想在没有原生支持 localStorage 对象的浏览器中使用它，可以在你编写的 JavaScript 代码的首部插入下面两段代码中的任意一段。

This algorithm is an exact imitation of the localStorage object, but making use of cookies.

if (!window.localStorage) {
  Object.defineProperty(window, "localStorage", new (function () {
    var aKeys = [], oStorage = {};
    Object.defineProperty(oStorage, "getItem", {
      value: function (sKey) { return sKey ? this[sKey] : null; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "key", {
      value: function (nKeyId) { return aKeys[nKeyId]; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "setItem", {
      value: function (sKey, sValue) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "length", {
      get: function () { return aKeys.length; },
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "removeItem", {
      value: function (sKey) {
        if(!sKey) { return; }
        var sExpDate = new Date();
        sExpDate.setDate(sExpDate.getDate() - 1);
        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    this.get = function () {
      var iThisIndx;
      for (var sKey in oStorage) {
        iThisIndx = aKeys.indexOf(sKey);
        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
        else { aKeys.splice(iThisIndx, 1); }
        delete oStorage[sKey];
      }
      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
      for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) {
        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
        if (iCouple.length > 1) {
          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
          aKeys.push(iKey);
        }
      }
      return oStorage;
    };
    this.configurable = false;
    this.enumerable = true;
  })());
}

Here is another, less exact, imitation of the localStorage object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer < 8. It also makes use of cookies.

if (!window.localStorage) {
  window.localStorage = {
    getItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
    },
    key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); },
    setItem: function (sKey, sValue) {
      if(!sKey) { return; }
      document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
      this.length = document.cookie.match(/\=/g).length;
    },
    length: 0,
    removeItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
      var sExpDate = new Date();
      sExpDate.setDate(sExpDate.getDate() - 1);
      document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
      this.length--;
    },
    hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); }
  };
  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}

与 globalStorage 的关系的兼容性

localStorage is also the same as globalStorage[location.hostname], with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and localStorage being an instance of Storage as opposed to globalStorage[location.hostname] being an instance of StorageObsolete which is covered below. 例如，在 http://example.com 中不能访问 https://example.com 中的 localStorage 对象，但是它们都可以访问同一个 globalStorage。 localStorage 是个标准接口，但 globalStorage 是非标准的。所以你的代码最好不要依赖这些关系。

Please note that setting a property on globalStorage[location.hostname] does not set it on localStorage and extending Storage.prototype does not affect globalStorage items, only extending StorageObsolete.prototype does.

globalStorage

// Save data that only scripts on the mozilla.org domain can access
globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?");

Specifically, the globalStorage object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used globalStorage on this domain (developer.mozilla.org) we'd have the following storage object available to us:

• globalStorage['developer.mozilla.org'] - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.

例子:

All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.

Remember a user's username for the particular sub-domain that is being visited:

 globalStorage['developer.mozilla.org'].setItem("username", "John");

Keep track of the number of times that a user visits all pages of your domain:

 // parseInt must be used since all data is stored as a string
 globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);

存储位置以及清除数据

In Firefox the DOM storage data is stored in the webappsstore.sqlite file in the profile folder (there's also chromeappsstore.sqlite file used to store browser's own data, notably for the start page - about:home, but potentially for other internal pages with "about:" URLs).

• DOM Storage can be cleared via "Tools -> Clear Recent History -> Cookies" when Time range is "Everything" (via nsICookieManager::removeAll)
  • But not when another time range is specified: (bug 527667)
  • Does not show up in Tools -> Options -> Privacy -> Remove individual cookies (bug 506692)
• DOM Storage is not cleared via Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now.
• Doesn't show up in the "Tools -> Options -> Advanced -> Network -> Offline data" list, unless the site also uses the offline cache. If the site does appear in that list, its DOM storage data is removed along with the offline cache when clicking the Remove button.

See also clearing offline resources cache.

更多信息

• Web Storage (W3C Web Apps Working Group)
• Enable/Disable DOM Storage in Firefox or SeaMonkey

例子

• JavaScript Web Storage Tutorial: Creating an Address Book Application - hands-on tutorial describing how to use the Web Storage API by creating a simple address book application
• offline web applications at hacks.mozilla.org - showcases an offline app demo and explains how it works.
• Noteboard - Note writing application that stores all data locally.
• jData - A shared localStorage object interface that can be accessed by any website on the internet and works on Firefox 3+, Webkit 3.1.2+ nightlies, and IE8. Think of it as pseudo-globalStorage[""] but write access needs user confirmation.
• HTML 5 localStorage example. Very simple and easy to understand example of localStorage. Saves and retrieves texts and shows a list of saved items. Tested in Firefox 3 or higher.
• HTML5 Session Storage. A very simple example of session storage. Also includes a example on local storage. Tested in Firefox 3.6 or higher.
• Basic DOMStorage Examples - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.
• halfnote - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.

浏览器兼容性

All browsers have varying capacity levels for both local- and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.

相关链接

• HTTP cookies (document.cookie)
• Flash Local Storage
• Internet Explorer userData behavior
• nsIDOMStorageEventObsolete
• StorageEvent

---------------------------------

摘要

DOM Storage，就是在Web Applications 1.0 specification中介绍的那些存储相关特性集合的名称。相比较在cookies中存储信息来说，DOM Stroage更大、更安全、更易于使用的。目前支持的浏览器包括Mozilla Firefox 2+, Google Chrome, Apple Safari, Opera和Microsoft IE9+,在移动设备上也包括iPhone & iPad Safari。

描述

DOM Storage机制是一种通过字符串形式的名／值对来安全地存储和使用的方法。这个附加功能的目标是提供一个更全面的、可以创建交互式应用程序的方法（包括那些高级功能，例如可以离线工作一段时间）。

目前，只有基于Mozilla的浏览器提供了DOM Storage的实现。不过，Internet Explorer也有一个类似的特性，叫做"userData behavior"，他允许你在多重浏览器会话中永久地保存数据。

DOM Storage 是很有用的，因为在任何一段时期都没有一个很好的、只通过浏览器来永久存储合理大小的数据的方法。浏览器cookies 限制了存储容量，而且并没有为组织永久性的数据提供支持，并且其他的方法还需要外部插件来实现（例如Flash Local Storage）。

第一个使用了新的DOM Storage功能(除了Internet Explorer 的 userData Behavior之外)的公共应用程序是由 Aaron Boodman 写的 halfnote(一个便签应用程序) 。在他的程序中，Aaron同时把便签内容保存到服务器上（当Internet连接可用时）和一个本地数据存储中。这就允许用户即便是在不定式发生internet连接中断时，也可以安全的写一些有备份的便签。

不过，在halfnote中表现出来的概念和实现，都还是相对简单的。它的诞生揭示了一种新的、可以在线或离线使用的网络应用程序。

参考

下面的内容都是作为每个window 对象的属性存在的全局对象。这也就是说，可以通过sessionStorage 或者 window.sessionStorage 来访问它们。（这很重要，因为随后你可以使用iframe来存储、访问、添加那些并不是立刻就包含在你页面中的数据。）

sessionStorage

这是一个全局对象（sessionStorage），它含有一个在页面会话有效期内可用的存储区域。只要页面没有关闭，一个页面会话就始终保持着，并且当页面被重新载入或恢复时“复活”。打开一个新的标签页或新窗口都会初始化新的会话。

// 将数据存入当前会话的一个存储中
sessionStorage.username = "John";
// 访问某些已存储的数据
alert( "username = " + sessionStorage.username );

sessionStorage 对象是最有用的，它持有那些应该保存的临时数据，而且一旦浏览器突然被刷新时，要恢复的那些数据，

举例:

自动保存文本字段的内容，如果浏览器突然被刷新，就恢复字段内容，这样就不会丢失任何输入了。

 // 获得我们要跟踪的那个文本字段
 var field = document.getElementById("field");
 // 看看我们是否有一个autosave的值
 // (这将只会在页面被突然刷新时发生)
 if ( sessionStorage.autosave ) {
     // 恢复文本字段中的内容
     field.value = sessionStorage.autosave;
 }
 // 每秒钟检查一次文本字段的内容
 setInterval(function(){
     // 并把结果保存到会话存储对象中
     sessionStorage.autosave = field.value;
 }, 1000);

更多信息:

• sessionStorage specification

globalStorage

这是一个全局对象(globalStorage)，它维护着各种公共的或者私有的，可以用来长时期保存数据的存储空间（例如，在多重的页面和浏览器会话之间）。

// 可以这样访问那些仅对mozilla.org域上的脚本保存的数据
globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?";
// 可以这样访问为任何网页任何域存储的数据
globalStorage[''].favBrowser = "Firefox";

特别地，globalStorage对象，提供了访问一些不同的可以保存数据的存储对象的方法。例如，如果我们要建立一个可以在域(developer.mozilla.org)下面可以使用globalStorage的网页，我们有下面这些存储对象可以使用：

• globalStorage['developer.mozilla.org'] - 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。
• globalStorage['mozilla.org'] - 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
• globalStorage['org'] - 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
• globalStorage[] - 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。

示例:

下面这些示例，需要你在所有想看到效果的页面中都插入脚本（包括如下所有的代码）。

记录某个指定子域名下面正在访问的用户的username：

 globalStorage['developer.mozilla.org'].username = "John";

跟踪一个用户在你的域名下所访问的所有页面的次数：

 // 由于所有数据都是被当作一个字符串来保存的，所以这里必须使用parseInt
 globalStorage['mozilla.org'].visits =
     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;

记录所有你访问的网站：

 globalStorage[''].sites += "," + location.hostname;

更多信息:

• globalStorage specification

More information

• Web Applications 1.0 Specification
• Web Applications 1.0 Storage Specification
• Enable/Disable DOM Storage in Firefox or SeaMonkey

Examples

• Basic DOMStorage Examples
• halfnote - Note writing application that uses DOM Storage.

Related

• HTTP cookies (document.cookie)
• Flash Local Storage
• Internet Explorer userData behavior