如何防止同一个网站打开多个标签页？答案

【问题标题】：How to prevent same website open multiple tab pages?如何防止同一个网站打开多个标签页？
【发布时间】：2016-02-19 13:19:51
【问题描述】：

我有一个场景会阻止同一网站在浏览器的多个打开的标签页中出现。我的想法是当用户第一次从浏览器打开一个网站时，这很好，当用户产生新的标签页或外部链接再次打开同一个网站时，我们应该将它重定向到已经打开的网站。我不知道如何实施。我可以提供一些线索吗？谢谢。

【问题讨论】：

“我们应该把它重定向到已经打开的那个”---这到底是什么意思？
github.com/tejacques/crosstab + window.focus()
同一网站不能打开多个标签页
你不能（也不应该）那样做。
用户可以随时使用其他浏览器或其他计算机打开网站的另一个视图。所以，基本上你永远无法阻止这种情况。您的网站应该能够处理查看相同状态的多个选项卡。

标签： javascript session-cookies session-state url-redirection

【解决方案1】：

也许使用本地存储。

Window.onload=function(){

if(localStorage.getItem('windows')===1){

window.close();

}else{

localStorage.setItem("windows",1);
}

}

Window.onbeforeunload=function(){
localStorage.setItem("windows",0);
}

【讨论】：

如果由于某种原因onbeforeunload 没有被触发 - 用户将永远无法打开网站？
localstorage 只提供给 HTML5，是吗？
而且，如果您的浏览器曾经崩溃或计算机突然关闭，因此 localStorage 项目未被清除，您将永远无法再次打开您的页面。不是一个好的故障模式。
只需通过 JS 设置/读取会话 cookie，而不是 localStorage

【解决方案2】：

我最近遇到了一个类似的问题，我必须防止多个窗口/选项卡在同一个 localStorage 上运行。

解决方案是使用StorageEvents：每当另一个（！）窗口更改与此窗口相同的 localStorage 时，每个窗口都会收到一个 StorageEvent。

因此，诀窍是为 localStorage 定义一个“虚拟”键，并让每个窗口向该键中写入一些随机值，以便让使用相同 localStorage 的所有其他窗口接收 StorageEvent：

  window.addEventListener('storage', () => {
    window.alert('another window or tab is working on the same localStorage')
  }, false)

  localStorage.setItem('Sentinel',Math.random())

【讨论】：