Question

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

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

BmiData

但是该解决方案大大降低了页面加载速度。

我想知道是否有一种方法可以在操纵DOM时强制更新浏览器缓存。像这样：

__init__.py

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

Answer 1

您可以将更新的HTML存储在sessionStorage中，然后在load事件window或发生导航时，例如用本地存储的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。

使用JavaScript更新浏览器缓存

1 个答案: