sessionStorage行为异常咨询：页面回退前进后登录验证失效

问题根源 #

浏览器的**后退/前进缓存（bfcache）**会保存页面的完整状态（包括DOM、JS执行环境），当你点击前进回到admin_index.html时，页面是从缓存中恢复的，不会重新执行页面初始化的脚本代码，导致权限检查逻辑没触发，也就不会重定向回登录页。

修复代码 #

修改admin_index.html中的脚本，将权限检查逻辑绑定到pageshow事件（该事件在页面首次加载或从bfcache恢复时都会触发）：

<script>
function checkAuth() {
    if(sessionStorage.getItem("key") == "loggedin"){
        sessionStorage.removeItem("key");
    } else {
        window.location.href = "/index.html";
    }
}

// 页面首次加载时执行
window.addEventListener('load', checkAuth);
// 页面从bfcache恢复时执行
window.addEventListener('pageshow', function(event) {
    checkAuth();
});
</script>

额外优化（可选） #

如果希望彻底避免bfcache对权限验证的影响，可以在admin_index.html中添加禁止bfcache的设置（不推荐滥用，但适合权限敏感页面）：

<script>
window.addEventListener('unload', function() {});
</script>

空的unload事件会让浏览器跳过bfcache缓存当前页面，代价是每次前进后退都要重新加载页面，会影响部分性能。

内容的提问来源于stack exchange，提问作者user21917572