SessionStorage 在 bfcache 中保持原值不变，需通过 pageshow 事件监听 persisted 状态并手动同步 UI；写入应实时原子化，必要时加版本校验确保兼容性。
SessionStorage 在页面前进后退（尤其是启用 bfcache 的现代浏览器中）时，不会自动重置或重新加载，但它本身是页面实例绑定的——关键在于：bfcache 会完整保存整个页面的 JS 执行上下文，包括 sessionStorage 的当前值、事件监听器、DOM 状态、变量值等。因此“恢复正确状态”的核心不是靠 sessionStorage 自动同步，而是要主动在页面被恢复时检查并响应。
理解 bfcache 下 sessionStorage 的实际行为
当用户点击后退/前进按钮触发 bfcache 恢复时：
- 页面不触发
load或pageshow中的常规初始化逻辑（除非你显式监听） -
sessionStorage的内容保持原样，和离开前完全一致（没有丢失，也不刷新） - 但你的业务逻辑（比如表单是否已提交、弹窗是否已关闭、tab 是否切换过）可能依赖于未持久化的 JS 变量，这些变量在 bfcache 中被冻结并还原，不一定和 sessionStorage 值一致
用 pageshow + persisted 判断并同步状态
这是最可靠的方式：监听 pageshow 事件，检查 event.persisted，仅在 bfcache 恢复时重新对齐 UI 与 sessionStorage 数据：
window.addEventListener('pageshow', (e) => {
if (e.persisted) {
// 页面从 bfcache 恢复，需手动同步
const savedState = sessionStorage.getItem('uiState');
if (savedState) {
const state = JSON.parse(savedState);
// 比如恢复选中的 tab
document.querySelector(`[data-tab="${state.activeTab}"]`).click();
// 恢复表单字段（如果没被自动还原）
document.getElementById('searchInput').value = state.searchValue || '';
}
}
});
写入 sessionStorage 时保持原子性和及时性
避免状态不同步的根本方法，是在交互发生时**立刻更新 sessionStorage**，而不是等到提交或卸载时才存：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 输入框实时存：
input或change事件中调用sessionStorage.setItem() - 切换 tab / 步骤时立即记录：
sessionStorage.setItem('onboardingStep', '2') - 避免依赖
beforeunload—— 它在 bfcache 场景下通常不触发
必要时主动清理或版本校验
如果 sessionStorage 存的是旧版结构，而代码已升级，直接解析可能出错。可加简单版本标记：
// 写入时
sessionStorage.setItem('uiState', JSON.stringify({
version: 2,
activeTab: 'settings',
searchValue: 'hello'
}));
// 恢复时校验
const data = JSON.parse(sessionStorage.getItem('uiState') || '{}');
if (data.version === 2) {
// 安全使用
} else {
// 降级或清空
sessionStorage.removeItem('uiState');
}
不复杂但容易忽略：bfcache 不是 bug，是性能优化；真正要做的，是把 sessionStorage 当作「页面快照的辅助存储」，而把状态同步逻辑收口到 pageshow 中统一响应。
