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() }); });