历史推送状态和缓存页面

Question

如何缓存页面加载通过ajax与pushState URL，以便重新加载页面从服务器可以避免?例如,

page 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、代理、浏览器)。其中之一就是浏览器的缓存。

假设您缓存了响应。请记住，http响应将被缓存，无论其内容类型(html, json等)，所以，你加载页面A，然后点击一个链接，用ajax更新页面和url与历史api。这是页面B，然后你访问页面C。响应A, B和C存储在浏览器的缓存中。但是如果你回到页面B，浏览器不会自动加载它，因为你已经为那个url使用了历史api。它只是更新url并触发一个popstate事件。

1. 一种方法是监听popstate并手动设置ajax调用。因为响应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 
      }
   });
   

   在这种情况下，如果state存在，你实际上并不使用浏览器的缓存以检索响应。

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