Javascript 多个选项卡同一会话，在所有选项卡都消失后清除会话

因此，我最近为我正在建设的一个场地制定了验收标准，该标准如下：

• 用户在任何选项卡中登录到站点后，如果他们在新选项卡中导航到站点，则必须已经登录
• 当用户注销任何选项卡时，他们必须立即注销所有选项卡
• 用户可以刷新页面并保持登录状态
• 关闭所有选项卡后，用户将注销，必须重新登录
• 我没有权限更改服务器代码（因此这必须在客户端完成）

我发现这真的很有帮助

当我仔细查看这篇文章时，我不得不排除cookies，因为除了向服务器发出请求外，tab a将不知道tab B已经更改了cookie

因此，我从上面的问题中提取了部分答案，开始使用本地存储，并添加了一个事件来检查“登录”状态是否已更改，这允许我在一个选项卡中注销，并立即在另一个选项卡中注销，而无需使用setInterval来持续检查！耶

但是我仍然有一个问题，如果你打开一个新的标签并导航到你仍然登录的站点，那么所有标签都关闭了

---

我尝试了一些可能的解决方案，比如有一个会话打开的选项卡计数器，在选项卡关闭/打开时递减和递增（使用window.onbeforeuload）。问题：当只有一个选项卡处于活动状态时刷新站点会使您注销。我能想到的所有东西都有一个边缘案例，但它不起作用。

本地存储+会话存储

我会将登录的值同时存储在本地存储和会话存储中，当加载窗口时（新选项卡或刷新现有选项卡），它会检查本地存储中的“登录”值，如果不存在，它会检查会话存储

基本上，我使用会话存储来处理页面刷新，使用本地存储来处理多个选项卡。每次卸载（关闭或刷新）窗口/选项卡时，我都会删除“已登录”的本地存储，当我返回页面时，如果它在会话存储中，但不在本地存储中，我会将其从会话存储中放回本地存储中，并作为经过身份验证的用户继续

以下是此操作的代码：

登录时：

localStorage.setItem('logged-in', true);
sessionStorage.setItem('logged-in', true);

在我的基本组件中：

window.onbeforeunload = (event) => {
    localStorage.removeItem('logged-in');
}

let loggedIn = localStorage.getItem('logged-in');
let sessionLoggedIn = sessionStorage.getItem('logged-in');
if(!loggedIn) {
    if(sessionLoggedIn) {
        localStorage.setItem('logged-in', JSON.parse(sessionLoggedIn));
        //go to authenticated space
        window.location.href = '/authenticated';
    } else {
        //go to login
        window.location.href = '/login';
    }
} else {
    //go to authenticated space
    window.location.href = '/authenticated';
}

window.addEventListener('storage', (event) => {
    if (event.key == 'logout' && event.newValue) { 
        sessionStorage.removeItem('logged-in');
        localStorage.removeItem('logout');
        window.location.href = '/login';
    }
});

注销时

localStorage.setItem('logout', true)

---

如果您发现自己处于类似的情况，希望这能帮助您中的一些人

should

localStorage.removietem（'identity'）不读取
localStorage.removietem（'logged-in'）？？