HTML body的onpagehide事件用法？页面隐藏时的状态保存-html教程-PHP中文网

onpagehide事件在用户离开页面时触发，用于bfcache兼容的状态保存；需通过event.persisted区分缓存（true）与销毁（false）场景，不可替代beforeunload做离开确认。

html body的onpagehide事件用法？页面隐藏时的状态保存

onpagehide 不是用于“页面隐藏”（比如 display: none 或 visibility: hidden），而是用户**离开当前页面**时触发——例如点击链接跳转、刷新、关闭标签页、前进/后退到其他页面。它和 onpageshow 配对，专为浏览器的**页面缓存机制（bfcache）** 设计，不是通用的 DOM 显示控制事件。

什么时候该用 `onpagehide` 而不是 `onbeforeunload` 或 `onunload`

核心区别在于缓存兼容性：

onbeforeunload 允许弹出确认框，但一旦触发，页面**无法进入 bfcache**；
onunload 同样会阻止 bfcache，且执行时机极短，很多异步操作（如 fetch）根本来不及完成；
onpagehide 是唯一能**在进入 bfcache 前安全执行清理或保存逻辑**的事件，且不阻断缓存。

如果你的目标是“用户切走再切回时状态不丢”，那 onpagehide + onpageshow 是正确组合；如果只是想弹窗确认离开，必须用 onbeforeunload。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

`onpagehide` 中怎么安全保存页面状态

关键点：不能依赖同步阻塞，也不能假设所有 API 都可用。以下建议基于实际兼容性（Chrome 11+、Firefox 5+、Safari 支持但行为不稳定）：

只做轻量、同步操作：比如把表单草稿写入 sessionStorage，更新 performance.navigation 相关标记；
避免发起新网络请求：即使调用 fetch，也别 await，且要加 keepalive: true（仅限 POST，且服务端需支持）；

用 event.persisted 判断是否来自缓存：

window.addEventListener("pagehide", (e) => {
  if (!e.persisted) {
    // 页面将被销毁（非缓存），可做最终清理
    sessionStorage.removeItem("draft");
  } else {
    // 页面将进 bfcache，此时保存状态更可靠
    sessionStorage.setItem("draft", JSON.stringify(formState));
  }
});