Как я могу использовать JavaScript, чтобы определить, нахожусь ли я на кешированной странице

Один из способов сделать это - включить время создания страницы на странице, а затем использовать некоторый javascript для сравнения местного времени с временем создания страницы. Если время отличается на пороговое значение, значит, страница была получена из кеша. Проблема заключается в том, что время на клиентском компьютере установлено неправильно, хотя вы можете обойти это, заставив клиента включить свое текущее системное время в запрос на создание страницы, а затем отправить это значение обратно клиенту.

Не напрямую, в некоторых браузерах для этого могут быть какие-то специальные команды.

Есть обходной путь, который сделает то, что вы хотите. Используйте cookie для хранения timestamp первого посещения, а затем используйте META HTTP-EQUIV, чтобы установить продолжительность кэширования файла (cacheLength). Если текущее время находится в пределах временного периода от timestamp до timestamp+cacheLength, то считайте, что они загружены из кеша. По истечении срока действия кеша сбросьте время cookie.

Используя XmlHttpRequest, вы можете открыть текущую страницу, а затем изучить http-заголовки ответа.

В лучшем случае просто выполните запрос HEAD, а затем изучите заголовки.

Некоторые примеры этого можно найти в http://www.jibbering.com/2002/4/httprequest.html.

Я начал с ответа, который «Дэниел» дал выше, но боюсь, что из-за медленного соединения я могу столкнуться с некоторыми проблемами с задержкой.

Вот решение, которое в конечном итоге сработало для меня. На стороне сервера я добавляю cookie refCount и устанавливаю для него значение 0. При загрузке документа в javascript я сначала проверяю refCount, а затем увеличиваю его. Проверяя, больше ли refCount 1, я знаю, что страница кэшируется. Так что для этого работает шарм.

Спасибо, ребята, что привели меня к этому решению.

Пока этому вопросу уже 4 года. Я думал, что добавлю свои 2 цента с помощью jQuery и плагина История.

$(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 существует, пользователь просматривает кешированную страницу.

С новой спецификацией 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 не поддерживает, хотя на самом деле последняя версия поддерживает.

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);
       }