历史 pushState 和缓存页面

Question

如何使用 pushState URL 缓存通过 ajax 加载的页面，从而避免从服务器重新加载页面？例如，

第 1 页：/foo.html。 单击按钮，发送 ajax 请求，获取响应并更新页面。 历史 pushState 作为新页面 /bar.html。

   history.pushState({}, '','/bar.html');

此时，我们希望浏览器将当前页面缓存为/bar.html。

window.onpopstate = function(event) {
  // browser is not loading page automatically for back/forward
  if (event.state)
    location.reload();
};

单击后退/前进按钮时，应从浏览器缓存中加载 /bar.html。但它再次从服务器加载。如何做到这一点？也就是让ajax更新的页面被当作普通的GET /bar.html，并被浏览器缓存。怎么样？

感谢您提供任何线索。 戴夫

Answer 1

如果您启用 http 缓存，在响应中添加适当的标头（Cache-Control、Expires、Last-Modified 等），那么这些响应将存储在缓存中。没有一个缓存。有服务器的缓存和下游缓存（ISP、代理、浏览器）。其中之一是浏览器的缓存。

假设您缓存了响应。请记住，无论其内容类型（html、json 等）如何，都会缓存 http 响应。因此，您加载页面 A，然后单击使用 ajax 更新页面的链接和使用历史 api 更新 url。这是页面 B。然后您访问页面 C。响应 A、B 和 C 存储在浏览器的缓存中。但是，如果您返回页面 B，则浏览器不会自动加载它，因为您已对该 url 使用了 History api。它只是更新 url 并触发 popstate 事件。

1. 一种方法是监听 popstate 并手动进行 阿贾克斯调用。由于响应 B 已经存储在浏览器的 缓存，它将从那里检索（如果它没有被改变 在服务器中）。

2. 另一种方法是将 ajax 检索到的数据存储在 一个名为 state 的对象，并将其与推送的 url 关联：

   state = { your_key: your_value }
   history.pushState(state, title, url)
   

   然后在返回按钮上捕获 popstate 事件，获取其关联 状态对象，访问您的数据并修改页面。

   $(window).on('popstate', function(event) { 
      var state = event.originalEvent.state; 
      if (state) { 
         // use it to modify the page 
      }else{ 
         // ajax call to get the data 
      }
   });
   

   在这种情况下，如果状态存在，您实际上并没有使用浏览器的 缓存以检索响应。

请记住，状态对象存储在客户端的磁盘中并且大小有限。因此，最好在状态对象中存储对数据的引用（例如 id）并将数据本身存储在内存中。这假设您有一个Signle Page Application，其所有页面都加载了ajax。 （正常的页面加载会清除客户端的内存）