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

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

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

相关推荐
β添砖java1 小时前
vivo响应式官网
前端·css·html·1024程序员节
web打印社区6 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗6 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长6 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅7 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_7 小时前
Chrome开发者工具
前端·chrome
YiHanXii7 小时前
this 输出题
前端·javascript·1024程序员节
楊无好8 小时前
React中ref
前端·react.js
程琬清君8 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1008 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节