localStorage 和 sessionStorage

客户端存储方案

Web 应用允许使用浏览器提供的 API 实现将数据存储到用户的电脑上。这种客户端存储相当于赋予了 Web 浏览器记忆功能。

客户端存储有以下几种形式：

• Web 存储：localStorage 和 sessionStorage
• Cookie
• IE User Data
• 离线 Web 应用
• Web 数据库
• 文件系统 API

localStorage 和 sessionStorage

实现了「Web存储」草案标准的浏览器在 Window 对象上定义了两个属性：localStorage 和 sessionStorage，这两个属性都代表同一个 Storage 对象 —— 一个持久化关联数组，两者的区别在于存储的有效期和作用域。

注：目前浏览器仅支持字符串类型数据存储，其他类型需要开发者做转化。

存储有效期和作用域

localStorage 存储的数据永久有效，作用域限定在文档源级别，文档源由协议、域名和端口来确定。同源的文档之间可以共享 localStorage 数据。

sessionStorage 存储的数据有效期和存储数据的脚本所在的最顶层窗口或者浏览器标签页一致，一旦窗口或标签页关闭，那么通过 sessionStorage 存储的数据也都被删除（重新打开浏览器恢复上次会话数据会恢复）。

sessionStorage 的作用域也是文档源级别，而且还被限定在窗口中，也就是说同源文档渲染在不同的浏览器标签页，它们之间拥有的是各自的 sessionStorage 数据。

存储 API

localStorage 和 sessionStorage 可以被当做普通 JavaScript 对象使用，还可以通过正式的 API 调用。下面是 localStorage 存储 API 的使用示例，对 sessionStorage 也适用：

// 设置/获取属性
localStorage.setItem("x", 1);
localStorage.getItem("x");

// 枚举
for (var i = 0; i < localStorage.length; i++) {
  var name = localStorage.key(i);
  var value = localStorage.getItem(name);
}

// 删除
localStorage.removeItem("x");
// 清除
localStorage.clear();

推荐使用 API 对存储数据进行设置。

存储事件

无论何时存储在 localStorage 或者 sessionStorage 的数据发生改变，浏览器都会对该数据可见的窗口对象上触发存储事件。与存储事件相关的事件对象有五个非常重要的属性：

• key：被设置/移除项的名字
• newValue：新值
• oldValue：旧值
• storageArea：存储域
• url：所在文档的 URL

localStorage 的存储事件都是采用广播机制的，浏览器会对当前正在访问同一站点的所有窗口发送消息。