拥抱 HTML5：storage 简介以及使用方法

前言

storage 其实是个很简单的东西，基本上只要知道 javascript 中对象的概念，然后读完此文，storage 的用法也就了然于胸了。

简单来说，你可以把 storage 想象成是储存在客户端（浏览器）中的一些 javascript 对象，那么有什么用呢？举个简单的例子，百度搜索会把你每次的搜索关键字用 storage（localStorage）存储下来，那么下次你再搜索相同的内容的时候，它会优先将你曾经搜过的内容进行下拉展示。

关于 storage 的内容，可以用 chrome 下的 Resources 面板进行查看。

方法：

clear() 删除所有值。ff 没有实现
getItem(name) 根据指定的名字 name 获取对应的值
key(index) 获得 index 位置处的值的名字
removeItem(name) 删除由 name 指定的名值对
setItem(name, value) 为指定的 name 设置一个对应的值

也可以用点语法和方括号语法来访问设置，但是建议用上面的方法。

还有一点要注意的是 value 必须是字符串。

sessionStorage

顾名思义，sessionStorage 对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭，或者更准确地说是保持到该页面标签关闭为止。对于同一个页面，在不同标签中打开，是拥有不同的 sessionStorage 对象的，而如果相同页面，刷新后，sessionStorage 对象也会重新开始。

// 设置
sessionStorage.setItem('name', 'hanzichi');
sessionStorage.age = '10';

// 读取
var name = sessionStorage.getItem('name'); // hanzichi
var age = sessionStorage.age; // 10

// 遍历
for (var i = 0, len = sessionStorage.length; i < len; i++) {
  var key = sessionStorage.key(i);
  var value = sessionStorage.getItem(key);
  console.log(key, value);
}
// age 10
// name hanzichi

// 也可以用 for in
for (var key in sessionStorage) {
  console.log(key, sessionStorage.getItem(key));
}

// 删除
delete sessionStorage.name;
sessionStorage.removeItem('age');

因为 sessionStorage 对象绑定于某个服务器会话，所以当文件在本地运行的时候是不可用的。sessionStorage 对象应该主要用于仅针对会话的小段数据的存储，如果需要跨域会话存储数据，那么就要使用 localStorage 了。

localStorage

localStorage 和 sessionStorage 大抵相同。可以多页面访问同一个 localStorage 对象，但是页面必须来自同一域名（子域名无效），使用同一种协议，同一个端口（同源策略）。

关于 localStorage 的使用方法，可以参考上面 sessionStorage 的使用。

Storage 事件

对 Storage 对象进行任何修改，都会在文档上触发 Storage 事件。当通过属性或 setItem() 方法保存数据，使用 delete 操作符或者 removeItem() 删除数据，或者调用 clear() 方法时，都会发生该事件。这个事件的 event 对象有如下属性。

domain 发生变化的存储空间的域名
key 设置或者删除的键名
newValue 如果是设置值，则是新值；如果是删除键，则是 null
oldValue 键被更改之前的值

遗憾的是，webkit（chrome）还不支持这个事件，尽管 IE8 以及 ff 支持其部分属性，但因为 chrome 的不支持，注定其到目前为止只是个鸡肋。

EventUtil.addHandler(document, 'storage', function(e) {
  console.log(e.domain, e.key, e.newValue, e.oldValue);
});

2015-12-02 更：

storage 搭配 document.domain 有一些诡异的现象，设置 document.domain 大多数情况是为了能够跨域（二级域名跨一级域名）请求数据。

比如我在二级域名 a.abc.com 下的一个 a.htm 文件写了这样的代码并运行：

document.domain = 'abc.com';
localStorage.setItem('name', 'hanzichi');

接着在相同目录的 b.htm 文件添上如下代码：

alert(localStorage.getItem('hanzichi'));

在 PC 端直接弹出 'hanzichi'，并且我们可以看到 localStorage 的数据存储在 a.abc.com 的域名下。

但是在移动端试了三款浏览器（chrome、2345、UC），只有 chrome Ok。将 b.htm 文件也添上 document.domain 就 ok 了。

document.domain = '2345.com';
alert(localStorage.getItem('name'));

至于原因，我也布吉岛...

2016-02-23：

需要进一步考虑。虽然 localStorage 的机制易于实现，但是它的一些控制机制却是非常复杂的。你需要考虑到缓存带给你的所有问题，比如缓存失效（什么时候需要删除缓存？），缓存丢失（当你希望数据在缓存中的时候它并不在怎么办？），还有当缓存满的时候你怎么办？