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) {

// 使用最新状态刷新视图

}

}

});