前端学习25 浏览器缓存（强缓存、协商缓存）和本地缓存

浏览器缓存是性能优化的一个非常重要的指标，而前端缓存也是我们在开发中必不可少的模块。

1.浏览器缓存

1.1 缓存流程

通常来说，浏览器首次加载资源会返回200，并且下载服务器文件，缓存资源及版本号，再次加载资源的时候就可根据资源请求头字段（强缓存&协商缓存）去判断是否使用缓存资源。HTTP Cache 是我们开发中接触最多的缓存，它分为强缓存和协商缓存。

强缓存：直接从本地副本比对读取请求头，不去请求服务器，返回的状态码是200。
协商缓存：会去服务器对比，若梅该百年才直接读取本地缓存，返回的状态码为304。

1.2 强缓存（expires\Cache-Control）

强缓存就是像浏览器缓存中查找该请求内容，并根据该结果的缓存规则来决定是否适用该缓存结果的过程。强缓存是利用http的返回头中的 Expires 和 Cache-Control 两个字段来控制的，用来表示资源的缓存时间。

Expires：这是HTTP 1.0 的字段，表示缓存到期事件，是一个绝对时间（当前时间+缓存时间），当客户端和服务端时间不一致时，会存在问题。

Cache-Control：HTTP 1.1 新增字段，他是一个相对时间，主要是利用该字段的max-age值来进行判断，例如：Cache-Control:max-age=3600 ，表示着资源的有效期为3600秒。

Cache-Control几个常见的设置值：

no-cache：不使用本地缓存。需要使用缓存协商，咸鱼服务器确认返回的相应是否被更改，如果之前的相应中存在ETag，那么请求的时候会与服务端验证，如果资源未被修改，则可以避免重新下载。
no-store：直接禁止浏览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的内容。
public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。
优先级：cache-control -> expires

1.3 协商缓存（(Last-Modified & If-Modified-Since\Etag & If-None-Match)）

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。

协商缓存是发起http请求携带 Etag 或者 Last-Modified 两个字段，由服务器做对比确定缓存资源是否可用。

服务器通过 Last-Modified 字段告知客户端，资源最后一次被修改的时间,客户端会自己对这个时间进行比对, 如果相等则表示未修改，响应 304；反之，则表示修改了，响应 200 状态码，并返回数据(如果资源更新的速度是秒以下单位,这个缓存就会失效,因为时间单位是秒)
Etag 存储的是文件的特殊标识(一般都是 hash 生成的)，服务器存储着文件的 Etag 字段,之后的流程和 Last-Modified 一致
Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。
优先级: ETag -> Last-Modified

某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，if-modified-since能检查到的粒度是秒级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；

2.本地缓存

2.1 Cookie

用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态
使用cookie在客户端存储一些其它的数据，可以设置使用范围、增删改查作用

//增改：
Cookies.set("token", res1.data.result.token, {
	expires: 7,
	path: "/",
	domain: "101hr.com"
});
//删除对应项
Cookies.remove("token", { path: "/", domain: "101hr.com" });
//查
Cookies.get("menuClick")

2.2 sessionStorage、localStorage

是一种在客户端存储数据的一种机制，主要的目的是为了克服由cookie带来的一些限制
当数据需要被严格控制在客户端上时，无须将数据在客户端和服务器之间来回的进行传送，并且可以存储大量的跨会话的数据
Web Storage包含了两种对象的定义，sessionStorage和localStorage
sessionStorage只能存储字符串类型数据，无法直接存储数组类型和JSON对象
所以可以JSON.stringify()方法转换成字符串，再存储到sessionstorage中,使用的时候再使用JSON.parse()转化回来

//sessionStorage和localStorage的使用方式是相近的
//增改
localStorage.setItem('redirect_uri',res.data.result.redirect_uri)
//存储数组和对象类型
localStorage.setItem('redirect_uri',JSON.stringify(res.data.result.redirect_uri))
sessionStorage.setItem('redirect_uri',res.data.result.redirect_uri) 
//查
localStorage.getItem('redirect_uri’)
JSON.parse(localStorage.getItem('redirect_uri’))
//删
localStorage.removeItem('redirect_uri’)
//清空storage数据
localStorage.clear()