angular - 复制选项卡时未清除会话存储

Question

我正在使用 Angular 7 构建 Angular 应用程序。我们不允许用户在浏览器的多个选项卡中打开我们的应用程序，我正在使用 LocalStoage+SessionStorage 来实现这一点。

app.component.ts

//This function is being called on component loading
register_tab_GUID() {
// detect local storage available
if (typeof (Storage) !== "undefined") {
  // get (set if not) tab GUID and store in tab session
  if (sessionStorage["tabGUID"] == null){
     sessionStorage["tabGUID"] = this.tab_GUID();
  } 
  var guid = sessionStorage["tabGUID"];

  // add eventlistener to local storage
  window.addEventListener("storage", (e) =>{

  if (e.key == 'tabGUID') {
     if (e.oldValue != e.newValue) {
        this._api.logout();
        localStorage.setItem('multiTabs' , 'true');
        this.router.navigate(['multi-tabs-not-allowed'])
      }
    }
  }, false);

      // set tab GUID in local storage
      localStorage["tabGUID"] = guid;
    }
  }



tab_GUID() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
  s4() + '-' + s4() + s4() + s4();
}

当用户打开一个新选项卡并尝试打开应用程序时，一切正常。但是当用户复制已经打开的选项卡时，我发现 SessionStorage 没有清除，并且它保存的数据与我们复制的上一个选项卡相同。

我尝试搜索 SessionStorage 的这种行为，但找不到与此相关的任何内容。这是正确的行为还是我做错了什么？

标签： angularbrowsersession-storage

Answer 1

为防止重复，您应该在应用程序启动时使用此代码。

window.addEventListener('beforeunload', function (event) {
    sessionStorage.removeItem('__lock');
});

if (sessionStorage.getItem('__lock')) {
    sessionStorage.clear();
    console.warn('Found a lock in session storage. The storage was cleared.');
}

sessionStorage.setItem('__lock', '1');