BFCache 与页面恢复的数据一致性实践

概述BFCache 能快速恢复页面。本文在恢复时校验并更新状态，避免展示过期数据。恢复检测与状态更新async function loadState(key) { const db = await new Promise((res, rej) => { const r = indexedDB.open('state', 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('s')) db.createObjectStore('s'); }; r.onsuccess = () => res(r.result); r.onerror = () => rej(r.error); }); const tx = db.transaction('s','readonly'); const req = tx.objectStore('s').get(key); const v = await new Promise((res, rej) => { req.onsuccess = () => res(req.result); req.onerror = () => rej(req.error); }); db.close(); return v; } addEventListener('pageshow', async e => { if (e.persisted) { const st = await loadState('app'); if (st) { // 使用最新状态刷新视图 } } });