LocalStorage、SessionStorage以及Cookie的区别

前言

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