Обновите кеш браузера с помощью JavaScript - PullRequest
Новая
       32

Обновите кеш браузера с помощью JavaScript

0 голосов
/ 11 февраля 2019

Мое веб-приложение отображается асинхронно с помощью JavaScript.Проблема в том, что браузер кэширует версию страницы, а затем не обновляет кэш, когда я манипулирую DOM.Затем, когда я нажимаю кнопки «Назад» или «Вперед», браузер загружает кэшированную версию веб-страницы, которая не является окончательной версией.

Мой патч - принудительная перезагрузка страницы при каждом запуске события popstate.

window.addEventListener('popstate', () => window.location.reload())

Но это решение значительно замедляет загрузку страницы.

Мне интересно, есть ли способ принудительно обновлять кэш браузера всякий раз, когда я манипулирую DOM.Примерно так: 

window.location.forceCacheUpdate()

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

1 Ответ

0 голосов
/ 12 февраля 2019

Вы можете сохранить обновленный HTML в sessionStorage, а затем заменить статическое HTML-тело запроса на локально сохраненный HTML-код при событии load, равном window, или при навигации, например, 

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="div"></div>
  <script>
    onload = () => {
      console.log(sessionStorage);
      const div = document.getElementById("div");
      if (sessionStorage.getItem('html') === null) {
        div.innerHTML = '<p>1</p>';
        sessionStorage.setItem('html', encodeURIComponent(div.innerHTML));
        setTimeout(() => { console.log('navigate'); history.back() }, 2000)
      } else {
        div.innerHTML = decodeURIComponent(sessionStorage.getItem('html'));
      }
      // do stuff
    }
  </script>
</body>

</html>

Вы также можете использовать интерфейс History или ServiceWorker ServiceWorker Расширение Chrome: блокировать элементы страницы перед доступом .

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

...