用onpagehide与onpageshow精准捕捉移动端浏览器冻结状态

移动端页面状态管理，尤其是应对后台冻结与bfcache恢复，一直是前端开发中既关键又容易踩坑的领域。许多开发者都曾困惑：明明监听了页面事件，为何表单草稿还是会丢失？为何页面恢复后状态出现错乱？

pagehide 事件中 event.persisted 是唯一可信信号

在移动端浏览器（特别是iOS Safari）中，当页面退到后台时，pagehide事件确实会触发。但关键在于，事件触发本身不是重点，事件对象中的布尔值event.persisted才是真正的判断依据。只有当该值为true时，才表明浏览器打算保留页面的状态——大概率会将其放入bfcache或进行冻结，而不是直接销毁。

一个常见误区是，只要监听到pagehide就立即执行保存逻辑。这种做法会带来问题：在Chrome Android上，用户快速切换App再切回来，可能导致保存逻辑被重复触发；而在Safari上，又可能错过页面被冻结前的最后一次保存机会。

• event.persisted === false：这通常意味着页面即将被销毁（如用户直接关闭标签页）。此时保存状态已无意义，甚至可能将无效数据写入localStorage，污染存储空间。
• event.persisted === true：这才是真正需要“抢救”页面状态的时机。但需注意，这个信号仅是浏览器的“尽力而为”，并不能100%保证页面后续一定能恢复。
• 另外，不要在pagehide的回调中尝试读取element.scrollHeight或getBoundingClientRect()等布局属性。页面此时已不可见，这些值经常返回0，导致保存的数据出错。

pageshow 的 event.persisted 必须校验，否则恢复逻辑会错乱

pageshow事件确实会在页面从冻结或bfcache中恢复时触发，但同时，它也会在普通页面刷新后触发（此时event.persisted === false）。如果不加判断，一触发pageshow就执行恢复逻辑，就会让用户刚刷新完、填了一半的表单，瞬间被localStorage中存储的旧草稿覆盖，体验极差。

正确的做法是进行双重条件检查：

• 首先，必须满足event.persisted === true。
• 其次，本地存储中必须确实存在对应的状态键值（例如localStorage.getItem('uiState')不为null）。
• 状态恢复完成后，强烈建议立即清除对应的存储键，或设置一个“已恢复”标记（比如localStorage.removeItem('uiState')）。这样可以避免下次pageshow事件触发时，再次误恢复已经处理过的状态。

freeze + pagehide 组合才是防丢保底方案

从语义上看，freeze事件似乎更贴近“冻结”这个动作本身。但它存在一个硬伤：兼容性。iOS Safari直到16.4+版本才稳定支持，旧版本会直接忽略该事件；而部分Android WebView甚至根本不派发它。因此，完全依赖freeze事件是不可靠的。

实践中，必须采用组合策略：

• 先注册freeze事件的回调，在其中执行saveState()，并设置一个标志位，如frozen = true。
• 再注册pagehide事件的回调。在这个回调中，只有当event.persisted为真且frozen标志为假时，才补存一次状态。这相当于为不支持freeze的浏览器提供了一个备用方案。
• 加上时间防抖。使用performance.now()记录上次保存的时间戳，如果两个事件在短时间内（如200毫秒内）接连触发，则跳过第二次写入，避免冗余操作。

恢复时不要重置整个页面状态，只同步可序列化字段

当页面从冻结中恢复（resume）或通过pageshow从bfcache中返回时，DOM结构和事件监听器实际上都完好保留，只是JavaScript的执行被暂停了。如果误以为需要“重新初始化”整个页面，就会导致定时器重复启动、网络请求重复发送、UI状态冲突等一系列问题。

真正需要做的，只有以下几项具体操作：

• 滚动位置恢复：使用window.scrollTo(0, saved.scrollY)恢复窗口滚动位置。不要直接设置某个具体元素的scrollTop，因为冻结期间页面元素可能已被重建。
• 表单字段恢复：只恢复input.value、textarea.value、select.selectedIndex等原始属性值。
• 媒体或编辑进度恢复：例如设置video.currentTime = saved.time。前提是保存时存储的是时间数值，而不是整个DOM节点或函数引用。

还有一个极易被忽略的要点：保存到本地存储（如localStorage）的内容，必须是纯JSON可序列化的。如果存入了一个document.body引用或一个setTimeout回调函数，JSON.stringify()在序列化时会静默丢弃这些无法处理的字段。等到恢复时，这些数据将无法获取，状态也就丢失了。因此，保存前务必确保状态对象是“干净”的，可被完整字符串化和解析。