js清除瀏覽器快取的幾種方法（專案總結）
阿新 • • 發佈：2019-01-29
以前很少關注這方面的問題，直達我們的技術經理找我們說要換框架，為什麼換框架呢，因為快取的問題，原來的專案是用版本號作為重新整理的依據的。因為微信 公眾號上有這樣一個機制，使用版本好的話，有時做不到及時重新整理，所以就用了vue.js,因為它有這樣的功能就是如果某個檔案裡面的資料改變了，那麼vue.js就會把這個檔案的名字也相應的改掉，所以快取裡面的東西 就用不了了，這樣就做到了及時重新整理，向後臺請求資料。
以前沒有總結過js關於清除瀏覽器快取的方法，今天就藉此總結一下吧。
瀏覽器快取，有時候我們需要他，因為他可以提高網站效能和瀏覽器速度，提高網站效能。但是有時候我們又不得不清除快取，因為快取可能誤事，出現一些錯誤的資料。像股票類網站實時更新等，這樣的網站是不要快取的，像有的網站很少更新，有快取還是比較好的。今天主要介紹清除快取的幾種方法。
清理網站快取的幾種方法
meta方法
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> // CONTENT="no-cache" 清除快取// CONTENT="no-cache" 清除快取
清理form表單的臨時快取
方式一：用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
}); async:false 是否非同步載入。方法二，直接用cache:false,
$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
cache:false,
ifModified :true ,
success:function(response){
//操作
}
async:false
});ajax裡的cache
true的話會讀快取，可能真的到伺服器上。
假如上次訪問了a.html，第二次的時候得到的是上次訪問的a.html的結果，而不是重新到伺服器獲取。
false的話會在url後面加一個時間綴，讓它跑到伺服器獲取結果。
cache只有GET方式的時候有效。
方法三：用隨機數，隨機數也是避免快取的一種很不錯的方法！
URL 引數後加上 "?ran=" + Math.random(); //當然這裡引數 ran可以任意取了
eg:
<script>
document.write("<s"+"cript type='text/javascript' src='/js/test.js?"+Math.random()+"'></scr"+"ipt>");
</script>
其他的類似，只需在地址後加上+Math.random()
注意：因為Math.random() 只能在Javascript 下起作用，故只能通過Javascript的呼叫才可以 方法四：用隨機時間，和隨機數一樣。
在 URL 引數後加上 "?timestamp=" + new Date().getTime(); 用PHP後端清理
在服務端加 header("Cache-Control: no-cache, must-revalidate");等等(如php中)方法五：
5、window.location.replace("WebForm1.aspx");
引數就是你要覆蓋的頁面，replace的原理就是用當前頁面替換掉replace引數指定的頁面。
這樣可以防止使用者點選back鍵。使用的是javascript指令碼，舉例如下：
a.html
以下是引用片段：
<html>
<head>
<title>a</title>
<script language="javascript">
function jump(){
window.location.replace("b.html");
}
</script>
</head>
<body>
<a href="javascript:jump()">b</a>
</body>
</html>
b.html
以下是引用片段：
<html>
<head>
<title>b</title>
<script language="javascript">
function jump(){
window.location.replace("a.html");
}
</script>
</head>
<body>
<a href="javascript:jump()">a</a>
</body>
</html>