1. Cookie
HTTP Cookie（也叫 Web Cookie 或者浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，他会在浏览器下次向同一服务器再发起请求时被携发送到服务器上。通常，它用于告知服务器两个请求是否来自同浏览器，如保护用户的登录状态。Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为可能。
Cookie 曾被用户客户端数据存储，但因为额外的性能开销和随着 localStorage 、 sessionStorage、IndexedDB 等技术的出现而逐渐被淘汰。
1.1 特点
- 本身用于浏览器和server通讯，被借用来做本地存储
- 最大存储数据上限 4kb
1.2 创建和生命周期
- 创建
通过
document.cookie属性可创建新的 Cookie，也可通过该属性访问非 HttpOnly 标记的 Cookie。
document.cookie = "yummy_cookie=choco";
document.cookie = "tasty_cookie=strawberry";
console.log(document.cookie);
// "yummy_cookie=choco; tasty_cookie=strawberry"服务器使用 Set-Cookie 响应头部向用户代理（一般是浏览器）发送 Cookie 信息。例如：
Set-Cookie: <cookie名>=<cookie值>服务器通过该头部告知客户端保存 Cookie 信息
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry
[页面内容]现在，对该服务器发起的每一次新请求，浏览器都会将之前保存的Cookie信息通过 Cookie 请求头部再发送给服务器。
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry- 生命周期
-
会话期 Cookie ：仅在会话期内有效。会话期Cookie不需要指定过期时间（Expires）或者有效期（Max-Age）。需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期Cookie 也会被保留下来，这会导致 Cookie 的生命周期无限期延长。
-
持久性 Cookie ：其生命周期取决于过期时间（Expires）或有效期（Max-Age）指定的一段时间。例如
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;:::tip 注意： 当Cookie的过期时间被设定时，设定的日期和时间只与客户端相关，而不是服务端。
1.3 使用场景
- 会话状态管理（如用户登录状态、购物车、游戏分数或其他需要记录的信息）
- 个性化设置（用户自定义设置，主题等）
- 浏览器行为跟踪（如广告推荐等）
2. localStorage
localStorage 可以作为浏览器的本地缓存方案，用来提升网页首屏渲染速度（根据第一次请求返回时，将一些不变的信息直接存储在本地）
2.1 特点
- 保存的数据永久储存（除非主动删除），下一次访问该网站的时候，网页可以直接读取之前保存的数据
- html5专门为存储设计，最大可存储 5MB
- 仅在客户端使用，不和服务端进行通信
2.2 存取数据
其保存的数据是以键值对的形式存在的，且所有数据都是以文本格式保存的。
- 存入
localStorage.setItem(key, value) - 读取
localStorage.getItem(key) - 删除
localStorage.removeItem(key)， 删除所有保存的数据localStorage.clear()
2.3 使用场景
localStorage在存储方面几乎没有特别的限制，理论上，一些 Cookie 无法胜任的、存储简单键值对的任务都可以交给 localStorage 来做。 比如考虑到其保存的数据是永久存储，因此可以用来存储一些内容稳定的资源，比如图片内容丰富的网站可以用其来存储 Base64 格式的图片字符串。
3. sessionStorage
数据只存在于当前会话，会话结束（浏览器或者标签页关闭）则清空，不同窗口打开的同源网站页面，sessionStorage 的内容无法共享，而 localStorage 和 Cookie 则可以共享。
3.1 特点
- 会话级别的浏览器存储
- 存储大小限制为 5MB
- 仅在客户端使用，不与服务端进行通信
3.2 存取数据
- 存入
sessionStorage.setItem(key, value) - 读取
sessionStorage.getItem(key) - 删除
sessionStorage.removeItem(key)， 删除所有保存的数据sessionStorage.clear()
3.3 使用场景
sessionStorage 更适合用来存储生命周期和它同步的会话级别的信息，这些信息只适用于当前的会话。当你开启新的会话时，它也需要相应的更新或释放。比如微博就使用 sessionStorage 存储单次会话的浏览足迹，它会存一个 lasturl 键去对应你上一次访问的 url 地址。当你切换 url 的时候，这个键值就会更新；当你关闭页面的时候，这个键就会被释放。另外，还可对表单信息进行缓存，比如刷新时表单信息不会丢失。
4. 总结图
