将 Vue.js 应用程序限制为仅一个浏览器选项卡

Question

背景：

我正在使用 Vue.js 开发一个 SPA，其中涉及使用用户的麦克风和扬声器进行实时通信。

由于这些 RTC 功能，在多个浏览器选项卡中打开应用程序可能会导致问题（例如回声）。

问题：

如何将应用程序（即应用程序实例）同时打开的浏览器选项卡的数量限制为一个？

我不确定我使用 Vue.js 是否与此处相关，但可能值得一提。

注意事项：

我已经阅读the selected answer 到以下问题：Java: ensure web application open only in one browser tab

这涉及将一些会话数据存储在服务器上，但我想保持我的服务器端代码无状态。
所以我想找到一个可以完全在客户端实现的解决方案。

我知道，在一台不涉及服务器端编码的机器上，跨不同浏览器可能无法解决这个问题。不过，我想知道限制每个浏览器打开实例数量的选项。

Answer 1

这只是部分答案，但我认为您可以使用本地存储来完成此操作，在您的情况下，特别是漂亮的 vue-ls 模块。提供的 JsFiddle 展示了如何在选项卡之间共享信息 - 对此进行扩展，以便如果您获得 ls$ 值并且它存在（比如跟踪打开的选项卡？）然后关闭或显示一个对话框等。