JavaScript Web Storage 详解

Web Storage 定义了两个对象用于存储数据：sessionStorage 和 localStorage。

sessionStorage 用于严格保存浏览器一次会话期间的数据，因为数据会在浏览器关闭时被删除。
localStorage 用于会话之外持久保存数据。

Web Storage

Web Storage 最早是网页超文本应用技术工作组（WHATWG，Web Hypertext Application Technical Working Group）在 Web Applications 1.0 规范中提出的。这个规范中的草案最终成为了 HTML5 的一部分，后来又独立成为自己的规范。Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用 cookie 的问题。

Web Storage 规范最新的版本是第 2 版，这一版规范主要有两个目标：

提供在 cookie 之外的存储会话数据的途径；
提供跨会话持久化存储大量数据的机制。

Web Storage 的第 2 版定义了两个对象：localStorage 和 sessionStorage。localStorage 是跨会话永久存储机制，sessionStorage 是一次会话的存储机制。这两种浏览器存储 API 提供了在浏览器中不受页面刷新影响而存储数据的两种方式。2009 年之后所有主要供应商发布的浏览器版本在 window 对象上支持 localStorage 和 sessionStorage。

注意：Web Storage 第 1 版曾使用过 globalStorage，不过目前 globalStorage 已废弃。

Storage 类型

Storage 类型用于保存名/值对数据，直至存储空间上限（由浏览器决定）。Storage 的实例与其他对象一样，但增加了以下方法。

clear()：删除所有值；不在 Firefox 中实现。
getItem(name)：取得给定 name 的值。
key(index)：取得给定数值位置的名称。
removeItem(name)：删除给定 name 的名/值对。
setItem(name, value)：设置给定 name 的值。

getItem()、removeItem() 和 setItem() 方法可以直接或间接通过 Storage 对象调用。因为每个数据项都作为属性存储在该对象上，所以可以使用点或方括号操作符访问这些属性，通过同样的操作来设置值，也可以使用 delete 操作符删除属性。即便如此，通常还是建议使用方法而非属性来执行这些操作，以免意外重写某个已存在的对象成员。

通过 length 属性可以确定 Storage 对象中保存了多少名/值对。我们无法确定对象中所有数据占用的空间大小，尽管 IE8 提供了 remainingSpace 属性，用于确定还有多少存储空间（以字节计）可用。

注意：Storage 类型只能存储字符串。非字符串数据在存储之前会自动转换为字符串。这种转换不能在获取数据时撤销。

sessionStorage 对象

sessionStorage 对象只存储会话数据，这意味着数据只会存储到浏览器关闭。这跟浏览器关闭时会消失的会话 cookie 类似。存储在 sessionStorage 中的数据不受页面刷新影响，可以在浏览器崩溃并重启后恢复。（取决于浏览器，Firefox 和 WebKit 支持，IE 不支持。）

因为 sessionStorage 对象与服务器会话紧密相关，所以在运行本地文件时不能使用。存储在 sessionStorage 对象中的数据只能由最初存储数据的页面使用，在多页应用程序中的用处有限。

因为 sessionStorage 对象是 Storage 的实例，所以可以通过使用 setItem() 方法或直接给属性赋值给它添加数据。下面是使用这两种方式的例子：

// 使用方法存储数据
sessionStorage.setItem("name", "Nicholas"); // 使用属性存储数据
sessionStorage.book = "Professional JavaScript";

所有现代浏览器在实现存储写入时都使用了同步阻塞方式，因此数据会被立即提交到存储。具体 API 的实现可能不会立即把数据写入磁盘（而是使用某种不同的物理存储），但这个区别在 JavaScript 层面是不可见的。通过 Web Storage 写入的任何数据都可以立即被读取。

老版 IE 以异步方式实现了数据写入，因此给数据赋值的时间和数据写入磁盘的时间可能存在延迟。对于少量数据，这里的差别可以忽略不计，但对于大量数据，就可以注意到 IE 中 JavaScript 恢复执行的速度比其他浏览器更快。这是因为实际写入磁盘的进程被转移了。在 IE8 中可以在数据赋值前调用 begin()、之后调用 commit() 来强制将数据写入磁盘。比如：

// 仅适用于 IE8 
sessionStorage.begin(); 
sessionStorage.name = "Nicholas"; 
sessionStorage.book = "Professional JavaScript"; 
sessionStorage.commit();

以上代码确保了"name"和"book"在 commit() 调用之后会立即写入磁盘。调用 begin() 是为了保证在代码执行期间不会有写入磁盘的操作。

对于少量数据，这个过程不是必要的，但对于较大的数据量，如文档，则可以考虑使用这种事务性方法。对存在于 sessionStorage 上的数据，可以使用 getItem() 或直接访问属性名来取得。下面是使用这两种方式的例子：

// 使用方法取得数据
let name = sessionStorage.getItem("name"); // 使用属性取得数据
let book = sessionStorage.book;

可以结合 sessionStorage 的 length 属性和 key() 方法遍历所有的值：

for (let i = 0, len = sessionStorage.length; i < len; i++){ let key = sessionStorage.key(i); let value = sessionStorage.getItem(key); alert(`${key}=`${value}`); 
}

这里通过 key() 先取得给定位置中的数据名称，然后使用该名称通过 getItem() 取得值，可以依次访问 sessionStorage 中的名/值对。也可以使用 for-in 循环迭代 sessionStorage 的值：

for (let key in sessionStorage){ let value = sessionStorage.getItem(key); alert(`${key}=${value}`); 
}

每次循环，key 都会被赋予 sessionStorage 中的一个名称；这里不会返回内置方法或 length 属性。要从 sessionStorage 中删除数据，可以使用 delete 操作符直接删除对象属性，也可以使用 removeItem()方法。下面是使用这两种方式的例子：

// 使用 delete 删除值
delete sessionStorage.name; // 使用方法删除值
sessionStorage.removeItem("book");

sessionStorage 对象应该主要用于存储只在会话期间有效的小块数据。如果需要跨会话持久存储数据，可以使用 localStorage。

localStorage 对象

在修订的 HTML5 规范里，localStorage 对象取代了 globalStorage，作为在客户端持久存储数据的机制。要访问同一个 localStorage 对象，页面必须来自同一个域（子域不可以）、在相同的端口上使用相同的协议。

因为 localStorage 是 Storage 的实例，所以可以像使用 sessionStorage 一样使用 localStorage。比如下面这几个例子：

// 使用方法存储数据
localStorage.setItem("name", "Nicholas"); 
// 使用方法取得数据
let name = localStorage.getItem("name"); // 使用属性存储数据
localStorage.book = "Professional JavaScript"; 
// 使用属性取得数据
let book = localStorage.book;

两种存储方法的区别在于，存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。

存储事件

每当 Storage 对象发生变化时，都会在文档上触发 storage 事件。使用属性或 setItem() 设置值、使用 delete 或 removeItem() 删除值，以及每次调用 clear() 时都会触发这个事件。这个事件的事件对象有如下4 个属性。

domain：存储变化对应的域。
key：被设置或删除的键。
newValue：键被设置的新值，若键被删除则为 null。
oldValue：键变化之前的值。可以使用如下代码监听 storage 事件：

window.addEventListener("storage", (event) => alert('Storage changed for ${event.domain}')
);

对于 sessionStorage 和 localStorage 上的任何更改都会触发 storage 事件，但 storage 事件不会区分这两者。

限制

与其他客户端数据存储方案一样，Web Storage 也有限制。具体的限制取决于特定的浏览器。一般来说，客户端数据的大小限制是按照每个源（协议、域和端口）来设置的，因此每个源有固定大小的数据存储空间。分析存储数据的页面的源可以加强这一限制。

不同浏览器给 localStorage 和 sessionStorage 设置了不同的空间限制，但大多数会限制为每个源 5MB。关于每种媒介的新配额限制信息表，可以参考 web.dev 网站上的文章“Storage for the Web”。

要了解关于 Web Storage 限制的更多信息，可以参考 dev-test.nemikor 网站的“Web Storage Support Test”页面。