5

如何使用 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，并被浏览器缓存。如何？

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

4

1 回答 1

5

如果启用 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 并手动进行相同的 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 
   }
});

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

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

于 2018-01-26T11:37:37.787 回答