bfcache处理

最近业务上遇到个问题：

项目里有两个app，当页面初始化的时候会跑一段代码codeA将url中的一些参数存储到WebStorage中。

当从appA跳转到appB，然后使用浏览器自带的返回按钮返回appA时，发现WebStorage中的参数还是appB的参数，也就是appA的初始化时的代码codeA没有跑。

查询过后发现是触发了浏览器的bfcache机制。

简介

bfcache全称back/forward cache，是部分浏览器（pc端测试chrome有但是edge没有）为了提升用户体验添加的一项功能。

bfcache会将页面的所有信息保存在缓存中，包含dom状态以及js堆栈数据。若页面缓存在bfcache中，浏览器在前进后退时会直接取出缓存中的页面信息而不会跑任何常规代码。

解决方案

可以监听页面的pageshow事件，该事件会在页面显示时触发，事件中的persisted为true时表示页面是从缓存中加载的。

window.addEventListener('pageshow', (e) => {
    if (e.persisted) {
        // 更新WebStorage中数据
    }
})