前端清除缓存方法(微信缓存引起的bug)
bug1:在新版微信中,部门安卓机子(华为)出现window.location.href/window.location.reload....等方法来刷新本页面链接,发现页面没有被刷新,经过排查,发现是因为缓存原因。
解决方案:这时候给链接加一个时间戳来解决页面缓存!!!
时间撮:
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 的效果:
window.onpageshow = function(event) { if (event.persisted) { window.location.reload() } };
注意 pageshow
不仅在显示被缓存的页面时触发,在第一次加载页面时也会触发。 因此需要检测事件的 persisted
属性,页面第一次加载时它的值是 false
。
另外 pageshow
的时机总是在 load
事件之后。 这一点很容易检测,比如下面的代码中 pageshow
日志总在 load
之前打印:
window.addEventListener('pageshow', function () { console.log('on pageshow') }) window.addEventListener('load', function () { console.log('load') })
XHR 缓存
解决缓存方案三:时间撮或者随机变量
详细参考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");