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，代理，浏览器）。其中之一是浏览器的缓存。

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

一种方法是收听popstate并手动制作相同的内容 ajax电话。由于响应B已存储在浏览器中缓存，它将从那里检索（如果它没有被更改在服务器中。）。
另一种方法是存储从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页面应用程序，其所有页面都加载了ajax。（正常的页面加载将清除客户端的内存）

历史pushState和缓存页面

1 个答案: