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

Question

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

如果重新加载/刷新意味着它注销。

当用户查看页面或说出任何其他解决此问题的方法时，请帮助我运行脚本。

Answer 1

您可以使用Storage 事件在 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

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

Answer 2

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

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

因此，如果用户注销，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);
}

资源

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

Answer 3

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

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

例如在 PHP 中：

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

这里要注意的关键是"executionContexts"指令。从文档：

“执行上下文”

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

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

Answer 4

看看HTML5 的页面可见性 API。这可以帮助你