5.2.1 概述
Web Storage 是一项非常重要，并且很实用的技术，已经被大多数浏览器（包括IE8）所支持，
在HTML4时代， 虽然cookie无处不在，但cookie仍然有自己的硬伤，如：
- cookie的大小是受限制的，一个cookie只能设置4KB的数据。并且大多数浏览器只允许每个站点存储20个Cookie；
- cookie保存的数据，无论服务器端是否需要，每次请求都会被发送到服务器端，白白耗费网络资源。并且，数据一般是非加密传输，存在安全隐患；
- cookie缺少操作数据的API，需要开发者自己封装接口，使用起来极不方便。
为了解决cookie的不足，HTML5提出了Web Storage方案。那么，什么是Web Storage呢？简单的讲，Web Storage是网页存储的总称，它让Web页面能够把数据存储在客户端的计算机中。它具有以下优势：
- 存储空间大，默认5M；
- 数据存储在客户端，可以直接获取，不会发送到服务器，既节省网络资源，又安全可靠；
- 这种机制是 web 浏览器原生提供的，所以不需要第三方插件的支持。
- 提供了操作数据的API，开发人员只需调用接口即可操作数据，简单易用。
概述
Web Storage是网页存储的总称，由 localStorage 和 sessionStorage 组成：
localStorage是持久化的本地存储，除非主动对它进行增加、删除、修改操作，否则它不会发生变化。数据存储完成后，它们就一直保存在用户的计算机中，永不过期，哪怕关闭网页或浏览器后再打开，或电脑关机后再开机，这些数据依然存在。并且，任何窗口的任何页面都可以访问这些数据。
sessionStorage的特点是临时存储，用来保存一个会话（session）中的数据。只有同一个会话中的页面才能访问这些数据，当会话结束后，数据也随之自动销毁。也就是说，只要浏览器窗口（或标签）不关闭，数据就一直存在，一旦关闭窗口或浏览器，数据将被清除。
浏览器为Web Storage提供了相关的API，开发人员只需调用API即可操作数据，简单易用。这些API见表 5‑1：
| API | 功能描述 |
|---|---|
| setItem(key,value) | 将 value 存储到 key 字段中 |
| getItem(key) | 获取指定 key 的本地存储值 |
| removeItem (key) | 删除指定 key 的本地存储值 |
| key(key) | 获取指定索引对应的 key，索引号从0 |
| length() | 获取对象中所存储的键-值对的数目 |
| clear() | 删除本地存储的全部数据 |
此外，Web Storage 还提供了一个 storage 事件，当存储区域的内容发生改变时，就会自动触发该事件，并把它发送给所有感兴趣的监听者。
由于 localStorage 和 sessionStorage 所提供的API和事件机制完全相同，它们之间的唯一不同，就是数据的生命期，一个是持久化存储，一个是临时存储，仅此而已。因此，下面就以 localStorage 为例，来介绍Web Storage的 API 和 storage 事件机制。