前言
LocalStorage、SessionStorage、Cookie 属于应用层的缓存，是可供开发者支配的缓存空间。
区别
LocalStorage：
- 大小：一般为 5MB
- 生命期：除非被清除，否则永久保存
- 易用性：高，源生接口容易使用
- 仅在客户端（即浏览器）中保存，不参与和服务器的通信
SessionStorage：
- 大小：一般为 5MB
- 生命期：仅在当前会话下有效，关闭页面或浏览器后被清除
- 易用性：高，源生接口容易使用
- 仅在客户端（即浏览器）中保存，不参与和服务器的通信
注：刷新页面后SessionStorage数据依旧存在
Cookie：
- 大小：一般为 4KB
- 生命期：一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cookie，默认是关闭浏览器后失效
- 易用性：差，需要程序员自己封装，源生的Cookie接口不友好
- 每次请求会默认携带在HTTP头中，如果使用 cookie 保存过多数据会降低 HTTP 的性能
三者的安全性
需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。
如何操作三者存储的数据
localStorage和sessionStorage操作
localStorage和sessionStorage操作相似，且操作简单；通过原生接口即可实现对这二者数据的操作；
通过window对象获取sessionStorage和localStorage对象
var sessionStorage = window.sessionStorage localStorage =window.localStorage
存储value——setItem
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
获取value——getItem
sessionStorage.getItem("key"); localStorage.getItem("site");
删除key —— removeItem
sessionStorage.removeItem("key"); localStorage.removeItem("site");
清空操作——clear
sessionStorage.clear(); localStorage.clear();
类似对象的操作——点操作和[]操作
console.log(sessionStorage.key) console.log(localStorage.key)
点操作和[]操作
Cookie操作
推荐使用已经封装好的插件，如js-cookie
参考：
http://www.yangzicong.com/article/12
https://www.cnblogs.com/minigrasshopper/p/8064367.html
https://www.jianshu.com/p/6e1bacd35f59
