解决浏览器缓存问题的三个解决方法

1.使用meta标签设置缓存机制，在head 设置 meta

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

详解：
Cache-Control头域
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下
Public指示响应可被任何缓存区缓存
Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
,pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.)
,常见的取值有private、no-cache、max-age、must-revalidate等，默认为private,其作用根据不同的重新浏览方式分为以下几种情况：
1）打开新窗口值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值，那么在此值内的时间里就不会重新访问服务器，例如： Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器)
2）在地址栏回车值为private或must-revalidate则只有第一次访问时会访问服务器，以后就不再访问。值为no-cache，那么每次都会访问。值为max-age，则在过期之前不会重复访问。
3）按后退按扭值为private、must-revalidate、max-age，则不会重访问，值为no-cache，则每次都重复访问
4）按刷新按扭无论为何值，都会重复访问 Cache-control值为“no-cache”时，访问此页面不会在Internet临时文件夹留下页面备份。
,指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问： Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如：禁止页面在IE中缓存 http响应消息头部设置： CacheControl = no-cache Pragma=no-cache Expires = -1 Expires是个好东东，如果服务器上的网页经常变化，就把它设置为0，表示立即过期

2.在引用css，js等文件的语句后面加上一个版本号或者不同的参数，就可以有效防止浏览器一直使用缓存中的css，js，然每次加载的都是不同名称的文件,v后面的数字也可以是随机生成。

<link href="css/demo.css?v=202003041049" rel="stylesheet">

3.在URL后面添加随机参数，来辨别是不同的网址页面这样每次访问的都是不同的链接

window.location='xxx.html?_r='+Math.random();

解决浏览器缓存问题的三个解决方法相关推荐

给url添加时间戳，解决浏览器缓存
//解决浏览器缓存function timestamp(url){// var getTimestamp=Math.random();var getTimestamp=new Date().getTi ...
给js加版本号解决浏览器缓存问题
给js加版本号解决浏览器缓存问题参考文章: (1)给js加版本号解决浏览器缓存问题 (2)https://www.cnblogs.com/wblx/p/11050498.html 备忘一下.
nginx配置静态资源，重新发布后，浏览器缓存导致异常原因和解决
原因: nginx作为静态资源服务器,重新构建后发生浏览器页面直接取缓存中的js等文件名,但是由于服务器中文件已经被替换导致出现异常. 浏览器在下次请求这个资源的时候不会将请求发向后端,而是直接从缓存 ...
前端页面更新，解决浏览器缓存不更新问题
问题在写静态网站的时候,经常回面临某些页面上传更新后,查看时会出现没有更新的清空,就是因为浏览器读取了缓存造成的,需要清空缓存刷新才可以看到页面的更新,但是有些用户不知道这些操作.就很头痛浏览器缓 ...
Angular 解决浏览器缓存快捷犀利之招
相信大家一定遇到过,我们开发的Web APP 编译部署上去之后,用户端并未看到更新的程序,需要刷新浏览器才能看到我们新增加的功能.这里,背后的原因就浏览器在背后偷偷地帮我们缓存了一些东西,比如常用的 ...
vue项目如何解决浏览器缓存问题
目录 1.什么是浏览器缓存 2.浏览器缓存类型 3.浏览器缓存的优势与劣势 4. 浏览器缓存机制 5.如何清除浏览器缓存在代码更新发布后,都会要求运营人员在访问网址时清除下本地缓存,防止万一掉坑那 ...
前端构建工具-gulp ！（解决浏览器缓存问题）
一,为啥要用构建工具项目中的js和css属于静态文件,客户端第一次访问的时候会缓存这些文件,那就意味着当我们需要改js跟css的时候,即使我们将文件中的代码改了重新发布,那么客户端也是看不到,客户端 ...
清除浏览器缓存js文件的几种方法
关于浏览器缓存浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能.但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据.像股票类网站实时更新等,这样的网站 ...
解决微信内置浏览器缓存问题的三个方法
方法1--在代码头部加以下meta标签 <meta http-equiv="Cache-Control" content="no-cache, no-store, ...

解决浏览器缓存问题的三个解决方法

解决浏览器缓存问题的三个解决方法相关推荐

最新文章

热门文章