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

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

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

相关推荐
paopaokaka_luck几秒前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失94934 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_36 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔3 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang3 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔3 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js