通过event.persisted可判断页面是否从BFCache恢复：true表示缓存恢复，false表示常规加载；pageshow事件必触发且比load更可靠，其persisted属性仅在此事件中有效。

直接通过 event.persisted 就能判断——只要它为 true，页面就是从 BFCache 恢复的；为 false 则是正常加载。

pageshow 事件触发时机

这个事件在页面**显示时必然触发**，不管是一次全新打开，还是点击浏览器“后退/前进”按钮返回。它比 load 更可靠，因为 BFCache 页面不会触发 load，但一定会触发 pageshow。

仿UC浏览器官方网站全屏jQuery幻灯片

仿UC浏览器官方网站全屏jQuery幻灯片

下载

persisted 属性的含义

event.persisted 是 pageshow 事件对象上唯一的扩展属性，它的值直接反映页面来源：

• true：页面是从 BFCache（往返缓存）中恢复的，DOM、JS 执行状态、滚动位置、表单输入等都保持原样
• false：页面是常规加载（首次访问、刷新、跳转进入），会走完整生命周期

实际监听写法（推荐 Vue 场景）

在组件挂载时绑定，在卸载前解绑，避免内存泄漏：

onMounted(() => {
  window.addEventListener('pageshow', handlePageShow)
})

onBeforeUnmount(() => {
  window.removeEventListener('pageshow', handlePageShow)
})

function handlePageShow(event) {
  if (event.persisted) {
    // 页面从缓存恢复 → 手动重置数据或强制刷新
    resetData()
    // 或 location.reload()（慎用，会丢失当前 JS 状态）
  }
}

注意几个常见误区

• 不要用 pagehide 的 persisted 判断——它始终是 undefined，该属性只存在于 pageshow
• 不要在 mounted 里直接调用重置逻辑——BFCache 页面不会重新执行 mounted，必须靠 pageshow 捕获
• 移动端微信 WebView、iOS Safari 对 BFCache 支持较好，但部分安卓 WebView 可能不支持，可加兜底（如结合 performance.navigation.type 或 performance.getEntriesByType('navigation')）