前端清除缓存方法（微信缓存引发的bug）

时间 2019-11-13

标签前端清除缓存方法微信引发 bug 繁體版

原文原文链接

bug1：在新版微信中，部门安卓机子（华为）出现window.location.href/window.location.reload....等方法来刷新本页面连接，发现页面没有被刷新，通过排查，发现是由于缓存缘由。javascript

解决方案：这时候给连接加一个时间戳来解决页面缓存！！！php

时间撮：html

var myDate = new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');

解决缓存方案二：利用pagehide/pageshow 事件前端

会话（Session）中的某一个页面显示/隐藏时，会触发 pagehide 和 pageshow 事件。这两个事件都有一个 persisted 属性用来指示当前页面是否被 BF Cache 缓存。所以能够经过 persisted 属性来达到禁用 BF Cache 的效果：java

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

注意 pageshow 不只在显示被缓存的页面时触发，在第一次加载页面时也会触发。所以须要检测事件的 persisted 属性，页面第一次加载时它的值是 false。jquery

另外 pageshow 的时机老是在 load 事件以后。这一点很容易检测，好比下面的代码中 pageshow 日志总在 load 以前打印：ajax

window.addEventListener('pageshow', function () {
  console.log('on pageshow')
})
window.addEventListener('load', function () {
  console.log('load')
})

XHR 缓存

解决缓存方案三：时间撮或者随机变量
json

详细参考https://harttle.land/2017/03/12/backward-forward-cache.html后端

前端清除缓存方法浏览器

meta方法有时候谷歌等浏览器不支持

//不缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">

清理form表单的临时缓存

<body onLoad="javascript:document.yourFormName.reset()">

其实form表单的缓存对于咱们书写仍是有帮助的，通常状况不建议清理，可是有时候为了安全问题等，须要清理一下！

jquery ajax清除浏览器缓存

方式一：用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control,以下:

$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
beforeSend :function(xmlHttp){ 
xmlHttp.setRequestHeader("If-Modified-Since","0"); 
xmlHttp.setRequestHeader("Cache-Control","no-cache");
},
success:function(response){
//操做
}
async:false
});

方法二，直接用cache:false

$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
cache:false, 
ifModified :true ,

success:function(response){
//操做
}
async:false
});

方法三：用随机数，随机数也是避免缓存的一种很不错的方法！

URL 参数后加上 "?ran=" + Math.random(); //固然这里参数 ran能够任意取了

方法四：用随机时间，和随机数同样。

在 URL 参数后加上 "?timestamp=" + new Date().getTime();

方法五：用php后端处理。

在 URL 参数后加上在服务端加 header("Cache-Control: no-cache, must-revalidate");