Question

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

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

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

Answer 1

当localStorage值发生变化时，您可以使用Storage events收到通知。

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）的兼容性，但大多数 good 浏览器都支持此标头。

Answer 5

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

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

5 个答案: