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

时间:2012-11-22 13:35:52

标签: javascript html

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

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

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

5 个答案:

答案 0 :(得分:46)

当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

我希望这能回答你的问题!

答案 1 :(得分:6)

“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或重新加载(可能是大量的)标签。

答案 2 :(得分:1)

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

答案 3 :(得分:0)

如果您能够在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 浏览器都支持此标头。

答案 4 :(得分:-1)

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

相关问题