解決辦法為:
(1) 用HTML標簽設置HTTP頭信息
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>
說明:HTTP頭信息“Expires”和“Cache-Control”為應用程序服務器提供了一個控制瀏覽器和代理服務器上緩存的機制。HTTP頭信息Expires告訴代理服務器它的緩存頁面何時將過期。HTTP1.1規范中新定義的頭信息Cache-Control可以通知瀏覽器不緩存任何頁面。當點擊后退按鈕時,瀏覽器重新訪問服務器已獲取頁面。如下是使用Cache-Control的基本方法:
1) no-cache:強制緩存從服務器上獲取新的頁面
2) no-store: 在任何環境下緩存不保存任何頁面
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:我們清除緩存的目的是為了及時看到頁面的更新情況,當我們將頁面上線時(即部署到正式環境,不會再做更改),建議把版本號固定,因為有緩存的頁面訪問更快,需要更新的時候再更換下固定版本號。