历史推送状态和缓存页面
History pushState and cache page
如何缓存页面加载通过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处理,并由浏览器缓存。如何?
谢谢你的提示。戴夫
如果您启用http缓存,在响应中添加适当的标头(cache - control, Expires, Last-Modified等),那么这些响应将存储在缓存中。没有一个缓存。有服务器的缓存和下游缓存(ISP、代理、浏览器)。其中之一就是浏览器的缓存。
假设您缓存了响应。请记住,http响应将被缓存,无论其内容类型(html, json等),所以,你加载页面A,然后点击一个链接,用ajax更新页面和url与历史api。这是页面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 } });
在这种情况下,如果state存在,你实际上并不使用浏览器的缓存以检索响应。
请记住,状态对象存储在客户端的磁盘中,并且大小有限。因此,最好在状态对象中存储对数据的引用(例如id),并将数据本身存储在内存中。这里假设您有一个单页应用程序,其中所有页面都是用ajax加载的。(正常的页面加载会清除客户端的内存)
- 事件和状态
- 获取选择框的状态
- 相位器状态未捕获参考错误
- 如何更改reactjs中外部/独立组件的状态或属性
- 如何在从浏览缓存加载页面时执行javascript
- 如何使用密码检测网络中的状态连接
- Ember.js-接口状态应该存储在哪里
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 在Angular 2中布线期间保持零部件处于活动状态
- ReactJS和SpringDataRest缓存问题可能与websocket有关
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- 如何从缓存中获取图像,css,js(http状态为200(缓存)而不是304)
- Nodejs使用回调函数缓存有状态对象
- 使用Javascript加载和缓存图像,并了解HTTP状态码
- MEAN stack - Express - Page在IE 11 - 304状态码中得到缓存
- jQuery缓存刷新复选框单选按钮状态
- 历史推送状态和缓存页面
- Angular ng重复缓存(避免在状态更改时重新渲染)
- 如何使用Selenium JavaScriptExecutor获取HTML5缓存状态
- 在React中根据状态缓存计算值的惯用方法