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

Question

我已经创建了一个基于localStorage的登录页面。

在加载页面时，我检查了localStorage的值。

如果我在多个标签页中打开网页，然后从其中一个标签页注销，所有剩余的页面都应该自动注销。

如果重新加载/刷新页面，那么就相当于登出。

请帮我编写一个脚本，当用户查看页面时运行它，或者说有其他方法可以解决这个问题。

- user1825788

---

我修改了你的问题标题，使其更相关于你实际提出的问题。 - Michael Berkowski

Answer 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

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

- Jim O'Brien

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，也不会同时重新加载（可能是大量的）标签页。

- Cerbrus

---

不建议使用"硬编码"事件 - 这种方式很容易覆盖事件处理程序。应该使用window.addEventHandler代替。 - Jim O'Brien

哎呀，那个IE检查看起来好丑啊。用jQuery版本会好看多了。 - Dr.Strangelove

Answer 3

如果您能够在Apache或从像PHP这样的服务器端脚本中设置HTTP头，则也可以使用HTTP头完成此操作：

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

例如，在PHP中：

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

需要注意的关键是"executionContexts"指令。从doc中可以得知:

"executionContexts"

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

目前在某些浏览器（呃..IE/Edge）中的兼容性尚不确定，但大多数好的浏览器都支持此标头。

- Yes Barry

Answer 4

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

- Akhil Sekharan