前端与后端请求数据缓存的四种方式

小小鱼er2023-08-01 23:01

前端与后端请求数据缓存的四种方式:

1,Cache-control

2,Expires

3,Etag/if-None-match

4,Last-modified/ if-Modified-Since

1,Cache-control

服务端再相响应中设置 Cache-Control:max-age 来告诉浏览器，再有效时间内max-age内重复请求，无需再次访问浏览器，直接再浏览器获取结果。

服务器端设置,伪代码如下

header.set("Cache-Control","public,max-age=10")

2，Expires

服务端再相响应中设置Expires:xxx 来告诉浏览器，再有效时间内Expires内重复请求，无需再次访问浏览器，直接再浏览器获取结果。

服务器端设置,伪代码如下

header.set("Expires",(date.now()+10).tostring())

3,Etag/if-None-match

etag需要搭配if-none-match使用，再首次请求资源时，服务器端对返回的数据，生成个签名，并设置再Etag里。浏览器缓存etag数据，并且再下次请求时候，再请求时将etag放在If-None-Match中。服务器端判断etag和if-none-match是否相等，若相等则说明数据未发生变化，服务器端返回304响应告诉浏览器从浏览器缓存中取数据即可。

前端设置伪代码：

伪代码块1：头部加If-None-Match

复制代码

var ETagItem=JSON.parse(localStorage.getItem('EtagItem'))

headers:{'If-None-Match':ETagItem?ETagItem.etag:null}

伪代码块2:接收304响应，取数据

复制代码

if(res.message.match(/code 304/)){

const data= EtagItem

}

伪代码块3：缓存数据

复制代码

const {headers,data}=res
localStorage.setItem('EtagItem',Json.stringifyx({
etag:headers.etag,
data
}))

服务器端：给数据加密，然后在判断加密后的etag数值是否和前端传来的If-None-Match匹配

复制代码

const dataETag=md5(data)
const resquestEtag=header.get('If-None-Match')
if(resquestEtag===dataETag){
  return 304
}

4，Last-modified/ if-Modified-Since

逻辑类似3，但是不是加密数据，是传一个数据结果最后修改时间，若是本次请求的 if-Modified-Since值还是最后修改时间，则返回304，否则返回数据和返回头部加上last-modified。前端收到数据后，localstorage缓存数据结果及last-modified值。