这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战
浏览器储存机制:
1.Cookie
通常直接叫做 cookie，最初是在客户端用于存储会话信息的。该标准要求服务器对任意 HTTP 请求发送 Set-Cookie HTTP 头作为响应的一部分，其中包含会话信息。
- 浏览器发送http请求时，请求头可以携带cookie发送给服务器。
- cookie过期时间之前一直有效，即使窗口或浏览器关闭，存储大小4KB，储存在本地磁盘
2.localStorage(h5提供新特性)
localStorage 对象在修订过的 HTML 5 规范中作为持久保存客户端数据的方案取代了 globalStorage。与 globalStorage 不同，不能给 localStorage 指定任何访问规则；规则事先就 设定好了。要访问同一个 localStorage 对象，页面必须来自同一个域名（子域名无效），使用同一种 协议，在同一个端口上。
- 存储在浏览器里面，存储大小5MB
- 除非用户清理浏览器数据，否则永久保留
3.sessionStorage(h5提供新特性)
sessionStorage 对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。这个对象 就像会话 cookie，也会在浏览器关闭后消失。
- 存储在浏览器里面，储存大小5MB
- 关闭浏览器,关闭页面就会清空
| Session | Cookie | LocalStorage | sessionStorage | |
|---|---|---|---|---|
| 存储类型 | Object、KeyValue | KeyValue | KeyValue | KeyValue |
| 存储方式 | 服务器存储 | 浏览器存储 | 浏览器存储 | 浏览器存储 |
| 大小限制 | 无限制 | 4KB（20个限制，不同浏览器有不同个数限制） | 5MB | 5MB |
| 有效时间 | 短期（根据HttpSession设置） | 短期（根据cookie设置） | 长期永久 | 会话结束即清除 |
| 安全性 | 高 | 低（设置https时，客户端无法直接读取，安全性较好） | 低 | 高 |
| 跨域 | 允许 | 不允许 | 不允许 | 不允许 |
| 使用场景 | 服务器端保持用户登录状态 | 客户端保持登录状态、个性化信息 | 数据缓存、系统配置、Token | 敏感操作信息 |
我对localStorage和sessionStorage储存的封装
class Cache{
constructor(key, type = "local", def = ""){
this.Storage = type == "local"||"localStorage" ? window.localStorage : window.sessionStorage; // 选择不同储存方式
this.key = key
this.def = def;
}
setCache(val) {
return this.Storage.setItem(this.key, JSON.stringify(val))
}
getCache() {
return this.Storage.getItem(this.key) ? JSON.parse(this.Storage.getItem(this.key)) : this.def
}
removeCache() {
this.Storage.removeItem(this.key)
}
clearStorage(){
this.Storage.clear();
}
}
// 用户信息
const TOKEN_KEY = window.origin+"__token__"
export let tokenStorage = new Cache(TOKEN_KEY, "localStorage", "")
总结
现在常用Storage存储token在路由跳转或接口请求拦截时候，进行处理读取或写入，cookie也行，但是也带来一些安全性。
