DOM Storage,是基于 Web Applications 1.0 specification 中介绍的 Structured client-side storage。相比 Cookies 来说,DOM Stroage 空间更大、更安全、更易于使用的。目前它只在基于Moziila的浏览器中可以使用,从 Firefox2 开始。

一、DOM:Storage: sessionStorage

浏览器支持:Firefox 2.0+

基本语法:

  • // 设置 key 值
    sessionStorage.key = value;
  • // 获取 key 值
    value = sessionStorage.key;

备注:

  1. 作为每个 window 对象的属性存在的全局对象,即:可以通过 sessionStorage 或者 window.sessionStorage 来访问它们。
  2. sessionStorage 含有一个在页面会话有效期内(只要页面没有关闭,一个页面会话就始终保持着,且当页面被重新载入或恢复时“复活”,而打开一个新的标签页或新窗口都会初始化新的会话)可用的存储区域。
  3. sessionStorage 持有那些应该保存的临时数据,一旦浏览器突然被刷新时,可恢复。
  4. sessionStorage 暂时还没有实现在浏览器崩溃后存储和恢复数据的功能( bug 339445 )。

更多信息:sessionStorage specification

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

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

二、DOM:Storage: globalStorage(重点)

浏览器支持:Firefox 2.0+

基本语法:

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

方法属性:

  • setItem(key, value) —— 设置或重置 key 值。
  • getItem(key) —— 获取 key 值。
  • removeItem(key) —— 删除 key 值。

或者:

  • // 设置 key 值
    window.globalStorage[“planabc.net”].key = value;
  • // 获取 key 值
    value = window.globalStorage[“planabc.net”].key;

备注:

  1. 作为每个 window 对象的属性存在的全局对象,即:可以通过 globalStorage 或者 window.globalStorage 来访问它们。
  2. Storage 空间:整个域名的默认 Storage 大小为 5MB (不过 Storage 区域的大小用户可以自定义),globalStorage[‘net’] 为 2MB,globalStorage[‘planabc.net’] 为 3MB,如果超过限制,则会报错。
  3. Firefox 支持 Storage 事件:document.addEventListener(“storage”, eventHandler, false);。
  4. Firefox 目前还没有实现 globalStorage[tld] 和 globalStorage[”] (会抛出一个安全错误),这是由于对于这些名字空间可以进行随意读写的话是有安全漏洞的。
  5. Firefox 2 允许访问比当前文档域名层次高的存储的对象,由于安全的因素 Firefox 3 中不再允许。

更多信息:globalStorage specification

样例:DOM Storage Test

// 跟踪一个用户在你的域名下所访问的所有页面的次数
globalStorage['mozilla.org'].visits =
    parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;

参考阅读:



共有13 条评论

  1. 1. 头像 Lin.x

    目前只有ff2.0+支持?
    IE8也不支持吗?
    浏览器不能全面支持
    DOM:Storage这种技术也不能普遍使用

  2. 2. 头像 netfreeman

    寻求IE FF NS 解决方案, 似乎在此找到一点思路,有机会整理出来,做个封装就好了.

  3. 3. 头像 闲耘

    @Lin.x IE有IE的实现,FF有FF的实现,而且已经有尝试封装兼容两者的js了。

  4. 4. 头像 fanxiaowen

    同求IE FF NS 解决方案, 我这里也需要

  5. 5. 头像 怿飞

    IE的解决方案可以看《跨浏览器的本地存储(一):userData behavior》

  6. 6. 头像 山寨货网

    一般人貌似还真不需要。

  7. 7. 头像 FLL

    同学,忘记把另外一个重要内容给转过来了
    ——————-
    http://developer.mozilla.org/cn/DOM/Storage

    注意: firefox目前还没有实现globalStorage[tld] 和 globalStorage[] (会抛出一个安全错误),这是由于对于这些名字空间可以进行随意读写的话是有安全漏洞的 更多信息

  8. 8. 头像 怿飞

    @楼上 文章在参考阅读中提到了,并且所说的注意点我文章中也提及到了

  9. 9. 头像 无语

    FF3B2,在页面www.mozilla.org下:
    如果设置globalStorage[‘mozilla.org’].key= value;
    value = window.globalStorage[‘mozilla.org’].key; 读不到…..

    在FF2正常.

  10. 10. 头像 welefen

    IE下有userData,Firefox下有globalStorage,Safari&Chrome下有database,Opera也可以通过widget来完成的。还可以用FLASH(本人不推荐)

  11. 11. 头像 米克

    貌似IE8是支持 Dom Storage的,分Session storage 和 Local storage两种。

  12. 12. Meta the local store

    […] Cross-browser local Storage (2) : DOM: Storage […]

  13. 13. 浅探跨浏览器的本地缓存解决方案 - web标准化 - 开发者第1527277个问答

    […] http://www.planabc.net/2008/08/14/dom_storage/ […]

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签