页面实时数据更新(进入页面或者浏览器后退前进状态刷新页面)
代码
window.addEventListener('pageshow', function (event) {if (event.persisted) {window.location.reload();}
});
1.pageshow事件:
当用户导航到页面时触发(包括首次加载和从bfcache恢复)
类似load事件,但会在每次页面显示时触发
2.event.persisted属性:
布尔值,表示页面是否从bfcache加载
true:页面从缓存恢复(如浏览器后退/前进操作)
false:普通页面加载
3.代码逻辑:
监听pageshow事件
当检测到页面是从bfcache恢复时(event.persisted为true)
立即执行页面刷新(location.reload())
4.典型应用场景:
当用户通过浏览器后退按钮返回页面时
需要确保页面数据是最新的情况
单页应用(SPA)中保持状态同步
5.与普通刷新的区别:
普通刷新会重新请求所有资源
从bfcache恢复会保留DOM和JS状态
总结:这段代码强制从服务器重新加载这种技术常用于需要实时数据更新的页面(如仪表盘、实时监控等),确保用户看到的是最新内容而非缓存版本。