解決在IE中獲取資料的快取問題，執行環境為node.js

weixin_34119545發表於2015-11-30
快取Node.js

IE下預設會開啟快取策略，不管是頁面還是通過ajax請求的資料都會議一個url，url是uri（統一資源定位符）的例項，url就是資源的識別符號。

寫一個demo進行驗證，測試環境：IE8，node.js 0.12.7，頁面模板為jade。

 

頁面程式碼：testCache.jade

頁面上放一個按鈕，點下後從後臺獲取一個自增的數值顯示在按鈕上。

doctype html
html
    head
        meta(charset='utf-8')
        title= title
        script(src='/js/jquery-1.10.2.min.js')
        script(src="/js/bootstrap.min.js")

    body
        button(id='btnTest', type='button', class='btn btn-default gap') 測試
    script.
        $(document).ready(function(){
            $('#btnTest').click(doTest);
        });

        function doTest(){
            $.ajax({
                type: 'GET',
                url: '/cache/data',
                data: '',
                dataType: 'html'})
                .done(function(data){
                    $('#btnTest').html(data);
                })
        }

 

後臺關鍵程式碼：

//獲取測試頁面
router.get('/cache/page', function(req, res){
    res.render('testCache', { title: 'testCache' });
});

//獲取自增數值
var index = 0;
router.get('/cache/data', function(req, res){
    var data = index++;
    res.write(data.toString());
    res.end();
});

 

執行效果可以看出無數次瘋狂的點選後，還是“0”，原因就是IE第一次拿到資料後，從相同路徑獲取資料時採用了預設的快取策略，當然可以通過IE的設定來規避快取。

 

快取問題，根本上還是響應header的設定問題，只不過IE在發現響應頭中沒有快取設定項時會採取快取策略，和其他瀏覽器的處理方式不同而已。

快取很多時候是必須的，比如：新聞頁面，升級頁面，靜態頁面，這些資源在被訪問後都可以快取在瀏覽器段，通過根據資源的更新策略來設定規定的過期時間，可降低同伺服器的資源獲取次數。

當然在不需要快取的地方，也要堅決的避免被快取。

在IE中避免被快取，如果是一個頁面，那麼就要在meta中設定快取。

    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="-1">
    <meta http-equiv="progma" content="no-cache">

上面的三項設定其實只要cache-control就可以了，本質上來說，在meta中的http-equiv的設定都會有伺服器填入頁面的響應header中。

如果是在頁面上通過ajax來獲取資料的，就要在後臺資料的響應處，加上快取的設定，明明白白地告訴瀏覽器，請你不要快取。如下。

//獲取自增數值
var index = 0;
router.get('/cache/data', function(req, res){
    var data = index++;
    res.setHeader('cache-control', 'no-cache');
    res.write(data.toString());
    res.end();
});

通過設定了no-cache後，本文的demo中的字增值就可以隨著點選而增加並顯示在按鈕上。 

 

在http的header中，快取的配置項主要是5種，這裡就列一下，網上的說明太多了。

1.cache-control

有4個值，private、no-cache、max-age、must-revalidate。

private：快取到私有快取。

max-age：相對過期時間，秒為單位，從瀏覽器獲取資源的相應秒數後過期。

must-revalidate：每次訪問都需要重新驗證。

no-cache：不快取。

 

2.expires

 過期時間，這是一個絕對時間，時間格式是格林威治時間，如“Sun, 08 Nov2009 03:37:26 GMT”，過了這個時間，就過期

 

3.progma

對http1.0伺服器的相容。 

 

4.Last-Modified/If-Modified-Since

在你的請求中傳送一個 If-Modified-Since 頭資訊，它包含了上一次從伺服器連同資料所獲得的日期。如果資料從那時起沒有改變，伺服器將返回一個特殊的 HTTP 狀態程式碼 304。

 

5.ETag/If-None-Match

 伺服器傳送你所請求的資料的同時，傳送某種資料的 hash (在 ETag 頭資訊中給出)。hash 的確定完全取決於伺服器。當第二次請求相同的資料時，你需要在 If-None-Match: 頭資訊中包含 ETag hash，如果資料沒有改變，伺服器將返回 304 狀態程式碼。

相關文章