第16章 存储
16.1 Web Storage
16.1.1 Web Storage 的定义
Web Storage 是一种可以简单地将 JavaScript 所处理的数据永久保存的接口。近年来，出现了 Web Storage 等多种客户端存储技术。于是，可以不用再像过去那样必须通过服务器才能进行数据的读写操作。由于这些技术很好地去除了与服务器的通信部分，因此人们可以享受到性能的提高、开发手续的削减、离线操作的实现等各个方面的优点。
特别是 Web Storage，它非常容易使用，标准也已经确定，浏览器对其的支持情况也较
为完善。从各方面来看，它在 HTML5 相关的 API 中属于是一种能被用于实际服务中的使用门槛很低的 API，且已经被用于很多服务中。它的功能是极具魅力的，对于初次接触 HTML5 的人来说，这是一个很好的切入点。
Web Storage 具有以下这些特征：
- Key-Value 型的简单的存储方式；
- 能够以与普通的 JavaScript 对象相同的方式来进行读写操作；
- （与 Cookie 相比）能够保存大容量的数据。
不过 Web Storage 并没有提供诸如创建用于搜索的下标或进行事务处理等功能。如果需要在客户端进行功能更复杂的数据管理，则要使用 Indexed Database、Web SQL
Database 或 File Writer API 等方法。
Web Storage 的容量
虽然 Web Storage 的标准中没有限制其可能的保存容量，但大部分的浏览器都是以
5MB 为上限对该功能进行实现的。尽管在一些浏览器中也可以根据用户设定来更改这一上限，不过对于面向一般用户公开的 Web 应用程序，还是应该意识到这一限制。
此外，在 Web Storage 中，为每个源准备了共享的存储空间。即使是不同的服务，只要它们的源是相同的，就能够共享存储。因此，有时 1 个服务可以使用的容量将不足5MB，对此请加以注意。
localStorage 与 sessionStorage
Web Storage 的实体是在全局对象中定义的 localStorage 与 sessionStorage 这两种对象。只要像通常的对象那样对其属性进行读写，就能使所保存的数据在页面跳转时也不会丢失。
localStorage 与 sessionStorage 的区别在于数据的生存周期。对于在localStorage中保存的数据来说，只要没有被显式地删除，即使浏览器或计算机执行了重启，这些数据也不会丢失。而另一方面，在 sessionStorage 中，数据仅能在同一个会话内得以保留。下面简单总结了 sessionStorage 的生存周期。
共享 sessionStorage 的情况
- 通常的页面跳转时
- 在 iframe 内打开了子页面
- 从奔溃中恢复时
- 重新载入时
没有共享 sessionStorage 的情况
- 在新窗口或新标签页中打开了页面
- 窗口被关闭后又被重新打开时
16.1.2 基本操作
本节之后将介绍 Web Storage 的基本操作。这里所介绍的范例代码都是使用的 localStorage，而对于 sessionStorage 的情况，操作方法也是完全相同的。
数据的读写
可以通过 setItem 方法将数据保存至 localStorage，并通过调用 getItem 方法来引用数据。此外，Web Storage 也提供了可以对值进行读写的语法糖，其操作方法与通常的对象相同。代码清单 16.1 是一
个示例。
数据的删除
可以通过调用 removeItem 方法来删除所保存的值。此外，Web Storage 也提供了可以对值进行删除操作的语法糖，其操作方法与通常的对象相同。代码清单 16.3 是一个示例。
数据的枚举
可以通过 key 方法与 length 属性来枚举保存于 Web Storage 中所有的数据。其中 length 是用于引用所保存的键的总数的属性，而 key 则是用于引用参数所指定的下标的键的方法。代码清单 16.4 是一个示
例。
16.1.3 storage 事件
在某个窗口中更改了 Web Storage 中的数据之后，将会在除了更改数据的窗口之外所有的窗口中触发 storage 事件。通过捕捉该 storage 事件并加以适当的处理，就能够在多个同时打开的窗口之间确保数据的一致性。
例如，通过在新标签页中打开的设定页面来更新存储时，可以通过捕捉并处理 storage 事件以使其他所有标签页都能获知设定的更改并执行 UI 的更新处理，从而避免与存储数据之间产生不一致。表 16.1 是 storage 事件对象的属性一览，而代码清单 16.6 则是 storage 事件的使用示例。
