前端清除緩存方法(微信緩存引起的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");


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM