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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。