当用户注销其中一个标签时，自动注销所有打开的标签答案

【问题标题】：Logout all open tabs automatically when user logs out in one of them当用户注销其中一个标签时，自动注销所有打开的标签
【发布时间】：2012-11-10 22:06:05
【问题描述】：

我已经创建了基于 localStorage 的登录页面。在加载页面时，我检查了 localStorage 的值。如果我在多个选项卡中打开网页，然后从任一选项卡中退出，则所有剩余页面应自动退出。

如果重新加载/刷新意味着它退出。

请帮我运行一个脚本，当用户查看页面或说任何其他方式来解决这个问题。

【问题讨论】：

我编辑了您的问题标题，使其与您实际提出的问题更相关

标签： javascript html

【解决方案1】：

您可以使用Storage events 在 localStorage 值更改时收到通知。

function storageChange (event) {
    if(event.key === 'logged_in') {
        alert('Logged in: ' + event.newValue)
    }
}
window.addEventListener('storage', storageChange, false)

例如，如果其中一个选项卡注销：

window.localStorage.setItem('logged_in', false)

然后所有其他标签都会收到一个StorageEvent，并且会出现一个警报：

Logged in: false

我希望这能回答你的问题！

【讨论】：

【解决方案2】：

“localStorage 将任何已保存的数据无限期地保存在用户的计算机上并跨浏览器选项卡”^Source

这意味着，如果您清空/删除您在一个选项卡中设置的登录数据，则所有其他选项卡中的数据也会更改。

因此，如果用户注销，localStorage 数据会更改。
然后，在您的选项卡上，使用onfocus 事件检测用户何时再次将焦点转移到该选项卡：

function onFocus(){
//Reload Page if logged out (Check localStorage)
    window.location.reload();
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.addEventHandler("focusin", onFocus);
} else {
    window.addEventHandler("focus", onFocus);
}

Source

这意味着您不会经常运行 javascript，或同时重新加载（可能大量）选项卡。

【讨论】：

不建议使用“硬连线”事件 - 您可以通过这种方式轻松覆盖事件处理程序。请改用window.addEventHandler。
ug，那个 IE 检查看起来很丑。 jquery 版本会看起来好多了

【解决方案3】：

如果您能够在 Apache 或 PHP 等服务器端脚本中设置一个 HTTP 标头，这也可以使用 HTTP 标头来完成：

Clear-Site-Data: "cookies", "storage", "executionContexts"

例如在 PHP 中：

header('Clear-Site-Data: "cookies", "storage", "executionContexts"');

这里要注意的关键是"executionContexts" 指令。来自doc：

“执行上下文”

表示服务器希望为响应的来源 (Location.reload) 重新加载所有浏览上下文。

目前尚不清楚某些浏览器 (ahem..IE/Edge) 中的兼容性，但大多数良好浏览器都支持此标头。

【讨论】：

【解决方案4】：

看看Page Visibility API for HTML5。这可以帮助你

【讨论】：