Web 本地存储或者 HTML5 本地存储,一般是指 Web Storage 规范,用于在浏览器保存持久化数据。最开始在 Firefox2 和 Safari4 中推出,目的是提供一套更大、更安全、更易于使用的本地存储功能,来替代数据存储在cookie。


Web Storage 兼容性

主流浏览器 Chrome、IE8+、Firefox2+、Safari4.0+、Opera11.5+,以及智能移动设备都支持了该规范,除了 IE6/7。
Web Storage Browser Compatibility

Web Storage API

Web Storage 本身包含 localStorage 和 sessionStorage,两者的 API 一致,但是 sessionStorage 不是永久存储,所以在这里不作讨论。

每个存储对象提供了访问 key/value 的列表 (items),key 和 value 可以是任何字符串(包括空字符串)。

localStorage 方法

  • .getItem(key)
返回 key 对应的 value,如果 key 不存在,返回 null
  • .setItem(key, value)
如果 key 不存在,相当于新增。
如果 key 已经设置了值,相当于更新。
如果用户禁用本地存储,或者超过了容量限制,将会抛出QuotaExceededError异常
  • .removeItem(key)
如果 key 存在,将会冲存储中移除对应的项目,否则什么也不会发生
  • .clear()
如果存储中有任何 key/value 对都会清空,否则什么也不会发生
  • .key(n)
返回 items 中的第 n 项的 key 名,如果 n 大于或等于 items 的长度,将会返回 null
  • .length
返回 key/value 对的数量

详情可查看 W3C 关于 Web Storage 的定义。

storage 事件

当调用了setItem()removeItem()或者clear()方法,其他可访问该存储对象的document会收到storage事件。IE8 可以在任何节点上绑定该事件,而 IE9 只能在 window上 绑定。
标准的 storage 事件具备以下属性:

  • key
  • oldValue
  • newValue
  • url
  • storageArea

其中,key 为当前更新存储的 key 值,oldValue 为旧值,newValue 为新值,url 为受影响的文档的 url,storageArea 为受影响的 document 对象。
IE 和 Chrome 支持手动创建和触发 storage 事件,看下面的例子:

function createStorageEvent() {
    var evt = document.createEvent('StorageEvent');
    evt.initStorageEvent('storage',false,false,'key','oldValue','newValue',
        'http://fabrikam.com/alleged.html',window.sessionStorage);
    window.dispatchEvent(evt);
}
<button onclick="createStorageEvent()">Create a storage event</button>

存储大小

  • 每个域允许存储的内容最大为 5M

安全策略

  • 浏览器会阻止第三方存储,不能跨顶级域操作
  • 如果是共享的多个子域名,避免使用 localStorage,因为存在跨目录攻击的潜在危险

globalStorage

浏览器支持:Firefox 2.0 - 13.0
存储大小:5MB
方法属性与 localStorage 同
globalStorage 不是一个标准的接口。Firefox 3.5 就已经支持 localStorage,所以如果你是为了兼容古老的 Firefox 2.0-3.0,可以使用 globalStorage[location.hostname] 来替代 localStorage。


userData 技术

浏览器支持:IE 5.5 - 9.0
存储大小:每个域最大 1024KB,每个文档最大 128KB
属性

  • expires
设置或者获取 userData 的有效期
  • XMLDocument
获取 XML 对象的引用

方法

  • load(ns)
加载 ns 名称空间下的 userData 对象
  • getAttribute(key)
标准的 DOM 方法
  • setAttribute(key, value)
标准的 DOM 方法
  • removeAttribute(key)
标准的 DOM 方法
  • save(ns)
保存 ns 名称空间下的 userData 对象

例子:

var el = document.createElement("meta"), ns = "localStorage";
el.addBehavior("#default#userData");
document.getElementsByTagName("head")[0].appendChild(el);
el.load(ns);
el.setAttribute('name', 'Jony');
el.save(ns);

其中,el.addBehavior("#default#userData")这一句还可以是el.style.behavior="url(#default#userData)"


参考:
Web Storage
DOM Storage guide
HTML5 Web Storage
userData Behavior

相关资源:
http://html5demos.com/storage
https://code.google.com/p/sessionstorage/