https://www.jianshu.com/p/513f6949fc25
1 简介
Web Storage 包括 localStorage 和 sessionStorage ，是浏览器本地数据存储的另一个方案，最开始提出来是为了弥补 Cookie 本地化数据存储的缺陷（存储量小、每次请求都会携带 Cookie 加大了额外的开销等）。localStorage 和 sessionStorage 两个对象都可以通过浏览器 window 对象访问到。它们保存的数据都是以键值对（key-value）的形式存在的
2 localStorage
2.1 简介
通过 window 的 localStorage 属性可以访问到当前页面的一个对象（Storage），这个对象是当前源（window.location.origin）保存的浏览器会话数据，它保存的数据是持久化的会长期保留，即使你关闭浏览器下次重新打开该页面，保存的数据依然还在不会被清空。而且在相同源（window.location.origin）的其他页面都是可以通过 localStorage 访问到，当然了源与源之间的 localStorage 是不能互相访问的。即每个源之间的 localStorage 是相互独立的
2.2 获取localStorage 对象
let data = window.localStorage
// 在浏览器环境下也可以省略 window
let data2 = localStorage
2.3 在localStorage中存储数据
localStorage.setItem('username','frontEndCoderZ')
2.4 访问localStorage中的数据
localStorage.setItem('username','frontEndCoderZ')
let username = localStorage.getItem('username')
console.log(username); // frontEndCoderZ
2.5 删除localStorage数据
localStorage.setItem('username','frontEndCoderZ')
localStorage.removeItem('username')
2.6 清空localStorage数据
localStorage.clear();
3 sessionStorage
与 localStorage 类似，它也是个 Storage 对象，不同之处在于 sessionStorage 有它的生命周期，不是长期保存的。在一个会话结束时(关闭浏览器/关闭浏览器页面标签 tab)，sessionStorage里面的相关数据就会被清空。
它的api和localStorage完全一致
4 小结
Web Storage 分为 localStorage 和 sessionStorage, 是本地化数据储存的另一个方案（弥补 Cookie 的不足），它被保存在本地，不会被浏览器携带至服务器（Cookie 会）。Cookie 存储的大小限制一般是不会超过 4kb（浏览器不同会有差异），Web Storage 一般能存储 5MB 左右。使用场景也不同，Cookie 一般用于安全验证（如用户验证信息会被携带至服务器），Web storage 一般用于保存用户操作的后的某个状态（用户刷新页面或重新进入页面回显之前的操作状态）。
