如何检查选项卡之间的通信（重复、刷新选项卡）- Angular

Question

目前我正在为学生进行在线测试。我很难检查学生是否复制当前选项卡或刷新当前选项卡。

因为如果学生在同一个浏览器上复制 10 个相同的考试选项卡，服务器就会超载。我想管理学生打开的选项卡数量。

我尝试使用跨选项卡，但它不适用于我的项目。我需要大家的帮助

Answer 1

解决此问题的一种方法是使用

localstorage

。您可以存储一个数字，该数字会在用户打开页面时增加，并在重新加载/关闭时减少。这样，您就可以跟踪用户打开您网站的选项卡数量。

在您的

AppComponent

onInit

或

constructor

内尝试此操作：

const tabsOpened = localStorage.getItem('tabsOpen');
console.log('tabs opened', tabsOpened); // here you can see how many tabs are opened currently 
// -> Take some action here. To prevent more server requests

if(tabsOpened == null) {
   localStorage.setItem('tabsOpen', '1');
} else {
   localStorage.setItem('tabsOpen', (parseInt(tabsOpened) + 1).toString());
}

// This will decrease your counter on tabs closed or reload
window.onunload = () => {
   const tabsOpened = localStorage.getItem('tabsOpen');
   if(tabsOpened != null) {
      localStorage.setItem('tabsOpen', (parseInt(tabsOpened) - 1).toString());
   }
}

您可以在错误发生时重定向到错误页面，或者执行其他操作。

请自行测试此代码，并确保您的用户有办法绕过任何错误。

请记住：您的角度应用程序仍然需要首先从服务器加载。因此，每当您打开新选项卡时，都会有一些服务器负载。不过，您可以例如阻止新选项卡进行更多服务器调用。