前端缓存数据

---

一、cookie

1.无法保存太大的数据（最大仅为4KB）
2.请求接口会携带上，浪费带宽

二、localStorage

1.它能保存更大的数据（IE8上是10MB，Chrome是5MB）
2.如果不手动删除，会一直存在

写法：

保存：localStorage.setItem('localStorage',123)
获取：localStorage.getItem('localStorage')
删除：localStorage.removeItem('localStorage')
全部删除：localStorage.clear()

三、sessionStorage

1.它能保存更大的数据（IE8上是10MB，Chrome是5MB）
2.一次会话中存在(一个窗口)

写法：

保存：sessionStorage.setItem('sessionStorage',123)
获取：sessionStorage.getItem('sessionStorage')
删除：sessionStorage.removeItem('sessionStorage')
全部删除：sessionStorage.clear()

四、强制缓存

服务器在响应头里面增加Cache-Control  
设置max-age 时间（单位时间是秒）不设置就是no-cache(前端不需要做任何处理)

五、协商缓存

服务端缓存策略 服务器返回资源和资源标识。浏览器 发送请求和资源标识。
如果有新的资源 服务器会返回200状态码，最新的资源和资源标识
如果没有新的资源，服务器会返回304状态码，直接从本地缓存拿资源
资源标识包括
Last-Modified(资源上一次修改的时间，只能精确到秒级，文件如果重复生成，但内容相同也标识成新资源) 
ETag（资源对应的唯一字符串，可以判断文件内容，优先使用）
前端请求头里面设置 If-modified-Since 为Last-Modified
前端请求头里面设置 If-None-Match 为ETag