Page Visibility 与页面卸载事件的持久化与恢复实践

概述页面切换与关闭场景需要正确暂停与持久化状态。本文展示基于 `visibilitychange/pagehide/beforeunload` 的可靠策略。可见性与暂停document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { // 暂停定时器或流式处理 } else { // 恢复任务 } }); 卸载前持久化与恢复function openDB(name) { return new Promise((resolve, reject) => { const r = indexedDB.open(name, 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('state')) db.createObjectStore('state'); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); } async function saveState(key, data) { const db = await openDB('lifecycle'); const tx = db.transaction('state', 'readwrite'); tx.objectStore('state').put(data, key); await new Promise((resolve, reject) => { tx.oncomplete = resolve; tx.onerror = () => reject(tx.error); }); db.close(); } async function loadState(key) { const db = await openDB('lifecycle'); const tx = db.transaction('state', 'readonly'); const req = tx.objectStore('state').get(key); const val = await new Promise((resolve, reject) => { req.onsuccess = () => resolve(req.result); req.onerror = () => reject(req.error); }); db.close(); return val; } addEventListener('pagehide', () => { saveState('progress', { ts: Date.now() }); }); addEventListener('beforeunload', () => { saveState('progress', { ts: Date.now() }); });