《十一》HTML5 Web Storage 存储

早期 Web 中使用 Cookie 在客户端保存诸如用户名等简单信息。

使用 Cookie 存储永久数据存在以下问题：

1. 单个 Cookie 的大小限制在 4kb，不适合大量数据存储。
2. 浏览器限制每个站点在用户计算机上存储的 Cookie 数量，大多数浏览器只允许某个站点存储 20 个 Cookie，如果试图存储更多的 Cookie，那么最旧的 Cookie 就会被丢弃掉。有些浏览器还会对将接收的来自所有站点的 Cookie 的总量进行限制，通常最多为 300 个。
3. Cookie 是随 HTTP 事务被一起发送的，因此会浪费一部分带宽。

Web Storage 存储：

使用 HTML5 Web Storage 存储可以在客户端以键值对的方式存储数据，存储的数据不会随 HTTP 事务一起发送。

客户端存储数据的两个对象为：

1. localStorage：本地存储。永久在客户端保存数据，保存的数据没有过期时间，直到手动删除之后存储的的内容才会被清除。

   手动删除 localStorage 的方式：在浏览器控制面板手动删除、JS 脚本删除、清除浏览器数据。

2. sessionStorage：会话存储。临时在客户端保存数据，在关闭浏览器标签页之后存储的内容将会被清除。

Web Storage 存储在每个域名下有容量限制，一般最大为 5M。
不同域名不会共享存储的数据。

Web Storage 存储的键和值只能是字符串类型，即使不是字符串，也会默认先转换成字符串再存储。
如果值是对象类型，可以使用 JSON.stringify() 将其转为字符串来进行存储，获取时使用 JSON.parse() 再将其转为对象。

判断浏览器是否支持：

if(typeof(Storage) !== 'undefined'){
    // 支持 web 存储
} else {
    // 不支持 web 存储
}

属性：

1. length：返回 key/value 键值对的数量。

方法：

1. key()：根据索引值获取对应的 key 值。
2. getItem(key)：获取指定 key 所存储的 value 值。
3. setItem(key, value)：将 value 存储到指定的 key 当中。
4. removeItem(key)：根据 key 从 Storage 中删除一个对应的键值对。删除不存在的不会报错。
5. clear()：移除 Storage 中所有的键值对。

localStorage.setItem('name', 'Lee')
localStorage.getItem('name')