历史pushState和缓存页面-Java 学习之路

如何使用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，并由浏览器缓存 . 怎么样？

谢谢你的任何线索 . 戴夫

1 回答

2
如果启用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 . （正常页面加载将清除客户端的内存）
回复于 2024-04-29T05:01:33+08:00

历史pushState和缓存页面

1 回答

相关问题