localStorage 和 sessionStorage 对比

1. 在了解 localStorage 和 sessionStorage 之前，先介绍一下 Web Storage 规范，这个规范的目的是解决一个问题：有些信息不需要频繁发送给服务器，但是需要存储在客户端本地，因此使用 Cookie 不合适问题。由此 Web Storage 定义了两个对象，即我们今天要对比的两个对象，它们提供了 Cookie 之外的存储会话数据的方式，能够跨会话持久化存储大量数据。

2. localStorage 对象：持久化本地存储

【1】生命周期永久生效，即使关闭浏览器会话，存储在 localStorage 中的数据也不会被清除，只能通过手动删除。

【2】可以多页面共享，但必须来自同一个域【子域也不可以】。

【3】以键值对方式存储，刷新页面数据不受影响。

存储数据：localStorage.setItem(key, value);

获取数据：localStorage.getItem(key);

清除数据：localStorage.removeItem(key);

清除所有数据：localStorage.clear();

3. sessionStorage 对象：会话级别存储，一次会话结束，数据被清除

【1】生命周期为关闭浏览器会话.

【2】在同一页面下数据共享

【2】以键值对方式存储，刷新页面数据不受影响。

存储数据等方式同 localStorage 相同......

4. Web Storage 与 Cookie 之间的区别：

【1】Web Storage 专注于本地存储数据，数据量大概在 5MB，远超 Cookie 存储数据量 4KB，Cookie 多用于客户端和服务器端数据的传递。

【2】Web Storage 已经封装好操作数据的方法， Cookie 需要手动封装，不然通过 document.cookie 操作极其不方便。