本文详解 sessionstorage 在浏览器前进/后退导航中不触发执行的常见陷阱，并提供基于 visibilitychange 事件的可靠解决方案，确保登录态校验逻辑始终及时运行。
本文详解 sessionstorage 在浏览器前进/后退导航中不触发执行的常见陷阱，并提供基于 visibilitychange 事件的可靠解决方案，确保登录态校验逻辑始终及时运行。
sessionStorage 本身行为完全符合规范：它在页面会话（即标签页）生命周期内持久存在，关闭标签页即清除，且同源共享。但问题往往不出在 sessionStorage 上，而出在JavaScript 代码的执行时机上。
当你从 index.html 登录跳转至 admin_index.html 时，页面首次加载，脚本同步执行，成功读取 "key" 并移除；但随后点击浏览器【后退】回到 index.html，再点【前进】返回 admin_index.html 时，现代浏览器（如 Chrome）可能启用 bfcache（Back/Forward Cache） —— 即缓存整个页面的 DOM、JS 状态与渲染结果，直接复用而非重新加载。此时 <script></script> 中的顶层代码不会再次执行，导致状态校验逻辑被跳过，用户“意外”停留在未授权页面。
✅ 正确解法：监听 visibilitychange 事件，确保每次页面重获可见性（包括前进恢复）时都执行校验：
批量分析录音转写，输出多维度拓客报告。触发词：录音分析、总结、音频总结、拜访记录总结。当用户提及「分析录音」「看看录音数据」「最近的录音」「通话记录」且意图为批量统计/分析时触发。仅出现「录音」或「拜访」时需结合上下文，若仅查看单条详情则不触发。
<!-- admin_index.html -->
<script>
// 首次加载时也执行一次（覆盖非 bfcache 场景）
function checkAuth() {
if (sessionStorage.getItem("key") !== "loggedin") {
console.warn("Session key missing or invalid → redirecting to login");
window.location.href = "/index.html";
} else {
sessionStorage.removeItem("key"); // 清理一次性凭证
console.log("Authenticated session validated and cleared");
}
}
// 立即执行（页面初次加载）
checkAuth();
// 同时监听页面可见性变化（覆盖前进/后退恢复场景）
document.addEventListener("visibilitychange", () => {
if (!document.hidden) { // 页面变为可见时触发
checkAuth();
}
});
</script>⚠️ 注意事项：
- 不要仅依赖
visibilitychange：需同时保留首次加载的同步校验，否则在禁用 bfcache 的浏览器（如部分 Firefox 版本）或硬刷新场景下会失效； -
document.hidden为false才表示页面真正可见（避免在后台标签中误触发）； - 若需更精细控制，可结合
document.visibilityState === 'visible'判断； -
sessionStorage不跨标签页共享，此方案天然适用于单标签页管理场景；若需多标签同步登录态，应改用localStorage+storage事件，但需额外处理竞态。
? 总结：sessionStorage 是可靠的，但“代码是否运行”取决于浏览器导航机制。通过 visibilitychange + 初始化校验双保险，即可彻底解决前进/后退导致的状态校验失效问题，保障前端路由级权限控制的健壮性。
