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.2 Indexed Database