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

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

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值。

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试