javascript 当用户注销其中一个选项卡时自动注销所有打开的选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13513874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Logout all open tabs automatically when user logs out in one of them
提问by user1825788
I have created Login page, based on localStorage. On loading the page I have checked the value of localStorage. If I opened the web page in more than one tab and then I logout from any one of the tabs, all the remaining pages should logout automatically.
我创建了基于 localStorage 的登录页面。在加载页面时，我检查了 localStorage 的值。如果我在多个选项卡中打开网页，然后从任一选项卡注销，则所有剩余页面都应自动注销。
If reload/refresh means it logging out.
如果重新加载/刷新意味着它注销。
Please help me to run a script, when user view the page or say any other way to solve this problem.
请帮助我运行脚本，当用户查看页面或说出任何其他方法来解决此问题时。
回答by Jim O'Brien
You can use Storage eventsto be notified when localStorage values are changed.
您可以使用Storage 事件在 localStorage 值更改时收到通知。
function storageChange (event) {
if(event.key === 'logged_in') {
alert('Logged in: ' + event.newValue)
}
}
window.addEventListener('storage', storageChange, false)
If, for example, one of the tabs logs out:
例如，如果其中一个选项卡注销：
window.localStorage.setItem('logged_in', false)
Then all othertabs will receive a StorageEvent, and an alert will appear:
然后所有其他选项卡都会收到一个StorageEvent，并且会出现一个警报：
Logged in: false
I hope this answers your question!
我希望这回答了你的问题！
回答by Cerbrus
"localStorage persists any saved data indefinitely on the user's computer and across browser tabs" Source
“localStorage 在用户的计算机和浏览器选项卡上无限期地保留任何保存的数据”来源
This means that if you empty / remove the login data you've set in one tab, the data will be changed in all other tabs as well.
这意味着如果您清空/删除您在一个选项卡中设置的登录数据，所有其他选项卡中的数据也将更改。
So, if the user logs out, localStorage data changes.
Then, on your tabs, detect when a user changes focus to that tab again using the onfocusevent:
因此，如果用户注销，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);
}
This means you won't be constantly running javascript, or reloading (a possibly large amount of) tabs at the same time.
这意味着您不会一直运行 javascript，也不会同时重新加载（可能是大量的）选项卡。
回答by Yes Barry
This can also be done with an HTTP header if you are able to set one either in Apache or from a server-side script like PHP:
如果您能够在 Apache 或从服务器端脚本（如 PHP）设置一个 HTTP 标头，也可以使用 HTTP 标头来完成此操作：
Clear-Site-Data: "cookies", "storage", "executionContexts"
E.g. in PHP:
例如在 PHP 中：
header('Clear-Site-Data: "cookies", "storage", "executionContexts"');
The key thing to note here is the "executionContexts"directive. From the doc:
这里要注意的关键是"executionContexts"指令。从文档：
"executionContexts"
Indicates that the server wishes to reload all browsing contexts for the origin of the response (Location.reload).
“执行上下文”
表示服务器希望为响应的来源 (Location.reload) 重新加载所有浏览上下文。
The compatibility in certain browsers (ahem..IE/Edge) is unknown at this time but there is support for this header in most goodbrowsers.
某些浏览器 (ahem..IE/Edge) 的兼容性目前未知，但大多数优秀浏览器都支持此标头。
回答by Akhil Sekharan
Have a look at Page Visibility API for HTML5. This can help you out
看看HTML5 的页面可见性 API。这可以帮助你
