如何使用 JavaScript 檢測我是否在緩存頁面上

Question

我想從緩存中顯示很長時間，並且我希望頁面渲染與從緩存加載頁面的行為略有不同。 有沒有一種簡單的方法可以用 JavaScript 確定這一點？

Answer 1

我從上面給出的“丹尼爾”的答案開始，但我擔心連接速度慢時我可能會遇到一些延遲問題。

這是最終對我有用的解決方案。 在服務器端，我添加了一個 cookie refCount 並將其值設置為 0。在 javascript 中加載文檔時，我首先檢查 refCount，然后增加它。 檢查 refCount 是否大於 1 時，我知道該頁面已緩存。 所以這就像一個魅力。

感謝你們帶領我找到這個解決方案。

Answer 2

一種方法是將頁面生成時間包含在頁面中，然后使用一些 javascript 將本地時間與頁面生成時間進行比較。 如果時間相差一個閾值，則該頁面來自緩存。 問題在於，如果客戶端計算機的時間設置不正確，盡管您可以通過讓客戶端在生成頁面的請求中包含其當前系統時間，然后將該值發送回客戶端來解決這個問題。

Answer 3

使用新的 Resource Timing Level 2 規范，您可以使用傳輸大小屬性來檢查頁面是否從緩存加載：

var isCached = performance.getEntriesByType("navigation")[0].transferSize === 0;

• 規范： https : //www.w3.org/TR/resource-timing-2/#dom-performanceresourcetiming-transfersize
• 瀏覽器支持： https : //developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming#Browser_compatibility
  • 請注意，在撰寫本文時，它顯示 Safari 不支持，而實際上最新版本支持。

Answer 4

雖然這個問題已經有 4 年的歷史了。 我想我會使用 jQuery 和History插件添加我的 2 美分。

$(document).ready(function()
{
    $('body').append('<div class="is_cached"></div>');
});

History.Adapter.bind(window,'statechange',function(){
   if($('.is_cached').length >= 1)
   {
      alert('this page is cached');
   }
});

首次加載文檔時。 附加了一個新的 div.is_cached。 加載緩存頁面時沒有兼容的方式來執行 javascript，但您可以監視歷史更改。 當歷史更改並且 div.is_cached 存在時，用戶正在查看緩存的分頁。

Answer 5

使用 XmlHttpRequest，您可以調出當前頁面，然后檢查響應的 http 標頭。

最好的情況是只做一個 HEAD 請求，然后檢查標頭。

有關這樣做的一些示例，請查看http://www.jibbering.com/2002/4/httprequest.html

Answer 6

不是直接的，一些瀏覽器可能有一些自定義命令。

有一種解決方法可以滿足您的需求。 使用 cookie 存儲第一次訪問的timestamp ，然后使用 META HTTP-EQUIV 設置文件緩存的時間長度 ( cacheLength )。 如果當前時間在從timestamp到timestamp+cacheLength ，則將它們視為從緩存加載。 一旦緩存過期，重置 cookie 時間。

Answer 7

1. 創建時將唯一數據添加到服務器上的頁面。 例如隨機數或創建時間：

       window.rand = {{ rand() }} 

2. 使用本地存儲將 url 與編號一起保存，並在需要時進行比較：

       reloadIfCached() {
            var cached = localStorage.getItem(window.location.href) == window.rand;
            if (cached) {
                window.location.reload();
            }
            localStorage.setItem(window.location.href, window.rand);
       }