js学习记录之visibilitychange————监听浏览器tab页离开或者进入

问题：打开浏览器2个选项卡，同时访问公司项目并且登录，这时cookie中存入当前登录账号的sid。 在其中一个选项卡上切换用户登录，这时候再访问另一个选项卡 在不刷新的情况下发现显示账号还是之前的账号，如果两个账号权限不同显示不同在某种情况下会报错，原因是这时候cookie中的sid已经刷新了被替换成后面登录账号的sid，原选项卡访问获取不到原账号的登录态了。这时我们可以用到visibilitychange，visibilitychange在当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，可以根据这一特点来判断切到前台则判断当前页面之前存储的用户信息sid和当前浏览器保存的sid是否一样，不一样的话就自动刷新reload()

代码如下

Document.hidden:（只读属性）返回布尔值，表示页面是（true）否（false）隐藏。

visibilitychange:当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改)事件。

举个栗子

document.addEventListener("visibilitychange", function(){
    document.title = document.hidden ? "用户离开了" : "用户回来了";
});