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

Question

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

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

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

Answer 1

更改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会在用户的计算机和浏览器标签上无限期地保留所有已保存的数据" ^来源

这意味着如果清空/删除您在一个选项卡中设置的登录数据,则数据也将在所有其他选项卡中更改.

因此,如果用户注销,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,也不会同时重新加载(可能是大量的)标签.

Answer 3

查看HTML5 的页面可见性 API。这可以帮助你