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

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

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

相关推荐
@大迁世界7 分钟前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙30 分钟前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump1 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD1 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro1 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin2 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马2 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
Lisonseekpan2 小时前
Java Caffeine 高性能缓存库详解与使用案例
java·后端·spring·缓存
用户1456775610372 小时前
干净的图片批量处理,处理速度飞快
前端
用户1456775610372 小时前
亲测好用!简单实用的图片尺寸调整工具
前端