關於禁止html緩存

　　在現代的瀏覽器裏，爲了加強用戶體驗，瀏覽器通常都會把網頁上所需的靜態文件緩存到本地，再次刷新的時候則無需再從新加載，可是咱們有時候就是不須要瀏覽器緩存這些文件，而是每次都從服務器端讀取數據，能夠用如下作法：

1.在html文件頭部加上：

<meta HTTP-EQUIV="pragma" CONTENT="no-cache">  
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">  
<meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">  
<meta HTTP-EQUIV="expires" CONTENT="0"> 

然而這些仍是不夠的，有些瀏覽器仍是緩存了文件，那麼就必須給每一個文件加個後綴時間戳，告訴瀏覽器這個是新文件，必須從新加載，瀏覽器就會重新到服務器端讀取數據文件顯示出來。

<link href="reset.css?v=20150127" rel="stylesheet">  

Set-Cookie (cookie設定)
說明：瀏覽器訪問某個頁面時會將它存在緩存中，下次再次訪問時就可從緩存中讀取，以提升速度。當你但願訪問者每次都刷新你廣告的圖標，或每次都刷新你的計數器，就要禁用緩存了。一般HTML文件沒有必要禁用緩存，對於ASP等頁面，就能夠使用禁用緩存，由於每次看到的頁面都是在服務器動態生成的，緩存就失去意義。若是網頁過時，那麼存盤的cookie將被刪除。
用法：

<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/">

注意：必須使用GMT的時間格式。

2.js清除瀏覽器緩存　　

爲了減少瀏覽器與服務器之間網絡傳輸壓力，每每對靜態文件，如js,css,修飾的圖片作cache，也就是給這些文件的HTTP響應頭加入 Expires和Cache-Control參數，並指定緩存時間，這樣必定時間內瀏覽器就不會給服務器發出任何的HTTP請求(除了強制刷新)，即便在 這段時間內服務器的js或css或圖片文件已經更新屢次，但瀏覽器的數據依然是原來最能初cache的舊數據，有沒有辦法讓瀏覽器拿到已經修改後的最新數 據呢?

有，方法是用ajax請求服務器最新文件，並加上請求頭If-Modified-Since和Cache-Control,以下: 

$.ajax({ 
    type: "GET", 
    url: "static/cache.js", 
    dataType: "text", 
    beforeSend :function(xmlHttp){ 
        xmlHttp.setRequestHeader("If-Modified-Since","0"); 
        xmlHttp.setRequestHeader("Cache-Control","no-cache"); 
    } 
});            

這裏用了jquery.

這樣瀏覽器就會把最新的文件替換掉本地舊文件。

固然，這裏還一個問題就是js必須知道服務器更新了那個js、css、圖片，利用cookie和時間版本應該能夠解決.

jquery自從1.2開始就有ifModified和cache參數了，不用本身加header

ifModified Boolean Default: false
Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header.
cache Boolean Default: true
Added in jQuery 1.2, if set to false it will force the pages that you request to not be cached by the browser. 

$.ajax({ 
    type: "GET", 
    url: "static/cache.js", 
    dataType: "text", 
    cache:false, 
    ifModified :true 
}); 

3.如何去除圖片緩存

在Web網站中,有時候修改圖片顯示仍然不是最新的,這是因爲瀏覽器對圖片的緩存形成.

（1）給圖片url添加隨機數參數,使瀏覽器每次從新請求圖片(可是在IE瀏覽器中,緩存有可能仍是不能清除,能夠使用下面第二種方法)

<div class="login_main">
        <div class="login_ptxt">
            <div class="login_p">
             <img alt=\"用戶頭像\"/>
             </div>
          </div>
</div>
$(".login_main .login_p img").attr("src", userIconUrl + "?temp=" + Math.random());//userIconUrl爲圖片URL

（2）第二種方法:動態添加img元素

<div class="login_main">
        <div class="login_ptxt">
            <div class="login_p">
            <!--動態添加img標籤-->
             </div>
          </div>
</div>
$(".login_main .login_p").append("<img alt=\"用戶頭像\"/>");

$(".login_main .login_p img").attr("src", userIconUrl + "?temp=" + Math.random());//userIconUrl
爲圖片URL

最後引用網上的評論：

連接：https://www.zhihu.com/question/27565755/answer/71171663
來源：知乎

完全禁止緩存，這個需求是錯誤的。緩存是瀏覽器的功能特性，又不是 Bug。

一般的作法是給靜態資源加入能夠表明版本號的文件名，如 main.20151107.css，或者使用 Gulp 之類的 md5 插件來根據文件內容生成惟一的文件名。
瀏覽器發現文件不一樣了，天然會從新加載。

MD5參考：https://segmentfault.com/a/1190000002932998