常用前端缓存
1. LocalStorage
本地持久性的缓存，保存之后，不通过手动清除的话，将会一直保存在浏览器中。localStorage 中的键值对总是以字符串的形式存储，这意味着某些数据类型会发生改变。所以在保存或取出数据时，经常使用到JSON.stringify 或JSON.parse 将数据在对象和字符串间互相转化
2. SessionStorage
会话级别的本地存储，它和 localStorage 很相似。最大区别在于：当浏览器被关闭时，sessionStorage的存储内容将全部丢失。
localStorage 和 sessionStorage 常见API
localStorage.length // 获得storage中的个数
localStorage.key(n) // 获得storage中第n个元素对的键值（第一个元素是0）
localStorage.getItem(key) // 获取键值key对应的值
localStorage.key // 获取键值key对应的值
localStorage.setItem(key, value) // 添加数据，键值为key，值为value
localStorage.removeItem(key) // 移除键值为key的数据
localStorage.clear() // 清除所有数据
localStorage 和 sessionStorage 都有同源策略限制，大小均在5MB左右
3. Cookie
HTTP协议本身是无状态的。Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。
Cookie的部分属性
| 属性 | 属性含义 |
|---|---|
| NAME=VALUE | 键值对，保存的名字和存储的值 |
| Expires | 过期时间 |
| Path | 该 Cookie 是在当前的哪个路径下生成的，如 path=/index/ |
Cookie原生的API不及Storage友好，更多时候都使用 npm 的 js-cookie
js-cookie 的API
import Cookies from 'js-cookie'
Cookies.set('name', 'value') // 创建简单的cookie
Cookies.set('name', 'value', { expires: 7 }) // 创建有效期为7天的cookie
Cookies.set('name', 'value', { expires: 7, path: '' }) // 为当前页创建有效期7天的cookie
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
//获取所有cookie
Cookies.get(); // => { name: 'value' }
Cookies.remove('name') // 删除指定Cookie
小结
localStorage 和 sessionStorage 的相同点
-
存储大小一般均为5M左右
-
都有同源策略限制，即无法跨域访问
-
数据仅在客户端中保进行存储，并不参与和服务器的通信(不会随着
http请求发送到服务器) -
以
key和value的形式进行存储数据，value值必须为字符串，不为字符串会自动转型(value如果是对象则需要转为json进行存储) -
API基本一致
localStorage 和 sessionStorage 的不同点
- 生命周期
localStorage存储的数据是永久性的，除非用户人为删除，否则会一直存在。sessionStorage存储的数据在当前会话结束时会被清除，浏览器关闭时，所有sessionStorage存储的数据会被删除。
- 作用域
localStorage: 在同一个浏览器内，同源文档之间共享localStorage数据，可以互相读取、覆盖、清除(同浏览器限制、同源限制)sessionStorage的作用域除了同源限制外，还被限定在了窗口中，只有同一浏览器、同一窗口才能读取和访问
