当用户在其中一个注销时自动注销所有打开的选项卡

Question

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

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

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

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

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

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

Answer 3

如果localStorage中存储的“session”仍然存在，只需编写一个小的javascript，每隔100ms检查一次（例如）。如果不是，请刷新页面。你可以使用setInterval。

Answer 4

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

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

例如。在PHP中：

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

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

“executionContexts”

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

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

Answer 5

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