使用 javascript 更新浏览器缓存答案

【问题标题】：Update browser cache with javascript使用 javascript 更新浏览器缓存
【发布时间】：2019-07-05 10:47:35
【问题描述】：

我的网络应用通过 javascript 异步呈现。问题是浏览器缓存了页面的一个版本，然后在我操作 DOM 时不更新缓存。然后当我单击后退或前进按钮时，浏览器会加载网页的缓存版本，这不是最终版本。

我的补丁是在 popstate 事件触发时强制页面重新加载。

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

但该解决方案会显着减慢页面加载速度。

我想知道是否有办法在我操作 DOM 时强制更新浏览器缓存。类似的东西：

window.location.forceCacheUpdate()

我希望能够在不重新加载整个页面的情况下更新缓存。

【问题讨论】：

stackoverflow.com/questions/7413234/… 或 thisinterestsme.com/stop-javascript-cached 在这两种情况下，您都必须在脚本中添加额外的文本
浏览器缓存 HTML，而不是 DOM。

标签： javascript browser-cache browser-history

【解决方案1】：

您可以将更新后的 HTML 存储在 sessionStorage 中，然后在 window 的 load 事件或发生导航时将静态 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 interface 或ServiceWorker ServiceWorker Chrome extension: Block page items before access。

有关在window 负载之间存储数据的一系列解决方案，请参阅Persist variables between page loads。

【讨论】：

不幸的是，onload 处理程序不会为后退/前进按钮触发。您知道加载历史记录时会触发的事件吗？
@JeremyGottfried 附加到<body> 的onload 属性事件处理程序是否已调度？