更新浏览器缓存中使用JavaScript

问题描述 投票:2回答:1

我的web应用程序通过JavaScript异步呈现。问题是,浏览器缓存一个版本的页面,然后当我操作DOM不更新缓存。然后,当我点击后退或前进按钮,浏览器加载网页,这不是最终版本的缓存版本。

我的补丁是强制页面重载每当popstate事件触发。

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

但是,该解决方案显著减慢页面加载。

我想知道如果有一种方法强制浏览器缓存更新,每当我操作DOM。就像是:

window.location.forceCacheUpdate()

我希望能够在不重新加载整个页面来更新缓存。

javascript browser-cache browser-history
1个回答
0
投票

您可以存储更新HTML内sessionStorage然后在loadwindow事件或本地存储的HTML代替静态的HTML请求体导航时出现,例如

<!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 interfaceServiceWorker ServiceWorker Chrome extension: Block page items before access

Persist variables between page loads的范围内,用于存储window负载之间的数据解决方案。

© www.soinside.com 2019 - 2024. All rights reserved.