前端本地存储的三种方式： localStorage sessionStorage cookie
一、localStorage
生命周期：永久 （不手动清楚 存储的数据就一直存在）
存储大小:5M
存储的数据数据类型：string
方法(API)：保存数据：localStorage.setItem(key,value) 获取数据：localStorage.getItem(key,value) 删除所有数据：localStorage.clear () 删除某个存储的值：localStorage.removeItem(key) 存储的数据长度：localStorage.length 获取某个索引的key: localStorage.key(index)
二、sessionStorage
生命周期：浏览器关闭前，即关闭浏览器 sessionStorage里存储的数据就被清除
存储大小：5M
存储的数据数据类型：string
方法(API)：保存数据：sessionStorage.setItem(key,value) 获取数据：sessionStorage.getItem(key,value) 删除所有数据：sessionStorage.clear () 删除某个存储的值：sessionStorage.removeItem(key) 存储的数据长度：sessionStorage.length 获取某个索引的key: sessionStorage.key(index)
三、cookie
生命周期：默认cookie的有效时间为浏览器关闭前 也可以手动设置cookie的有效时间
存储大小：4KB
存储的数据数据类型：string
使用插件来使用cookie js-cookie
使用 安装：npm i js-cookie 引入：import Cookie from 'js-cookie' API：设置：Cookie.set(key,value,{}) [第三个参数为其他配置 为一个对象 可配置cookie的有效时间(expires:7表示该数据有效期为七天 expires可以是Number或者Date实例对象 传入Number时表示天数 Date实例可以指定任何时刻 如果给这个值Expire设置为0或者负值，那么这样的设置就是在关闭浏览器时，就会清除cookie ) 路径(path:"/' 指定该cookie可见路径 注：指定了路径以后 删除cookie时也要带上path路劲才能删除成功) httpOnly:true 设置该属性为不允许客户端访问该cookie 防止被xxs攻击 提高安全性 sceure：true 设置该属性意思为只有在https协议下访问 浏览器才会发送该cookie SameSite属性 该属性表示跨域请求时是否携带cookie 该属性有三个值：Strict ：完全禁止第三方cookie Lax规则稍稍放宽，大多数情况也是不发送第三方Cookie，但是导航到目标网址的 Get 请求除外 。Chrome 计划将Lax变为默认设置 这时，网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效] 获取：Cookie.get(key) 删除：Cookie.remove(key)
四、localStorage sessionStorage cookie三者之间的区别
localStorage和sessionStorage 都是存储在客户端(即浏览器) 不与服务器进行交互通讯 sessionStorage为会话存储 生命周期到关闭浏览器前有效 而且不同页面(不同的浏览器窗口)或标签之间无法共享sessionStorage数据 localStorage为永久存储 同一浏览器内数据皆可共享 需手动删除 不然一直存在 cookie是存储在用户本地终端的数据 可以设置有效期 cookie一般会在发生请求的时候携带在请求头中 有个数的限制 一般超过二十个
1. 无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议
2. Storage在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 cookies 的运行方式不同。
3. 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage，而localStorage 属性是一个可被用于访问当前源（ origin ）的本地存储空间的 Storage 对象（即localStorage共用同一个源的Storage 对象）。
### 特殊场景：登录信息token存放sessionStorage
同一浏览器，同一域名，不同tab窗口：
tab1: 已登录
复制域名到tab2，自动登录
tab2退出登录，再重新登录
复制域名到tab1
结果：tab1不会自动登录
原因：sessionStorage并不共享状态，tab2重新登录导致tab1的旧token已失效
结论：不建议将登录信息存放Storage，而是存放有httponly和secure的cookie
（个人原以为复制了新的tab2的信息到tab1上会可以自动登录 因为以为复制了新的信息重新存储 但是其实tab1的token已存在[过期] tab2的复制过去不会修改到tab1原有的token 但是如果复制到一个新打开的窗口就会自动登录 当前会从新开启新的会话存储）
五、参考文献
前端本地存储（Cookie、LocalStorage、SessionStorage）
