HTML頁面每次打開的時候都清除頁面緩存

時間 2019-11-10

標籤 html 頁面每次打開時候清除緩存欄目 HTML 简体版

原文原文鏈接

解決辦法爲：

（1）用HTML標籤設置HTTP頭信息javascript

<HEAD>php

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">css

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">html

<META HTTP-EQUIV="Expires" CONTENT="0">java

</HEAD>node

說明：HTTP頭信息「Expires」和「Cache-Control」爲應用程序服務器提供了一個控制瀏覽器和代理服務器上緩存的機制。HTTP頭信息Expires告訴代理服務器它的緩存頁面什麼時候將過時。HTTP1.1規範中新定義的頭信息Cache-Control能夠通知瀏覽器不緩存任何頁面。當點擊後退按鈕時，瀏覽器從新訪問服務器已獲取頁面。以下是使用Cache-Control的基本方法：ajax

　　1) no-cache:強制緩存從服務器上獲取新的頁面chrome

　　2) no-store: 在任何環境下緩存不保存任何頁面json

　　HTTP1.0規範中的Pragma:no-cache等同於HTTP1.1規範中的Cache-Control:no-cache，一樣能夠包含在頭信息中。後端

（2）在須要打開的url後面增長一個隨機的參數：

增長參數前：url=test/test.jsp

增長參數後：url=test/test.jsp?ranparam=random()

說明：由於每次請求的url後面的參數不同，至關於請求的是不一樣的頁面，用這樣的方法來曲線救國，清除緩存

（3）

chrome：

如今新版的Chrome在developer Tools（F12調出來）的Settings（右下角有個齒輪標誌）中有了個Disable cache選項。勾了即可以。

（4）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
});
（5）：用隨機數，隨機數也是避免緩存的一種很不錯的方法！

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();
（6）用PHP後端清理

在服務端加 header("Cache-Control: no-cache, must-revalidate");等等(如php中)

（7）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>

（8）添加版本號（如 layout.css?v=1）

我的認爲方法2更快，由於清除瀏覽器緩存還要等瀏覽器響應。可是每次更改版本號也很麻煩，因此須要想辦法自動添加版本號，

如下是本人收集的方法：

方法一：能夠經過js自動給html添加版本號

<script type="text/javascript">
document.write("<link rel='stylesheet' type='text/css' href='/css/layout.css?v="+new Date().getTime()+"'>");
</script>

方法二：如果jsp頁面，可使用java代碼生成時間戳（如果jsp頁面用方法一也行，但此方法更方便）

<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">

方法三：使用其餘的方法添加版本號，如用node.js自動配置等

ps：咱們清除緩存的目的是爲了及時看到頁面的更新狀況，當咱們將頁面上線時（即部署到正式環境，不會再作更改），建議把版本號固定，由於有緩存的頁面訪問更快，須要更新的時候再更換下固定版本號。

相關標籤/搜索

每日一句

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