在选项卡/浏览器关闭但不刷新时清除 localStorage

Question

有没有办法检测标签关闭事件来清除localStorage。我需要localStorage 跨标签共享数据。 window.onbeforeunload 事件工作正常，但对我来说有 2 个问题：

1. 它还会在我不想要的页面刷新时触发。
2. 标签关闭时不需要确认框。

就像关闭窗口时一样，sessionStorage 会被清除。同时我可以清除localStorage 但不知道要绑定什么事件。我检查了一些已经可用的问题，但似乎没有一个可以解决这个问题，有一些解决方法可以通过使用标志来点击链接和表单提交，但不是一种干净的方法。请为此提出任何解决方案。

Answer 1

我知道这是一个老问题，但我只是在寻找解决方案，但找不到任何可以正常工作的方法。然后我想出了一个适合我的解决方案。

我所做的是改变视角，而不是在浏览器关闭时清除本地存储，我决定在打开浏览器时清除它。用户不会看到差异。

我只是设置了一个在页面加载时检查 sessionStorage 的函数，如果它是空的，则该函数将 localStorage 清除；之后，它将register 设置为 sessionStorage 以确保不会因为重新加载页面而再次清空 localStorage。

function clearStorage() {

    let session = sessionStorage.getItem('register');

    if (session == null) {
    
        localStorage.removeItem('remove');

    }
    sessionStorage.setItem('register', 1);
}
window.addEventListener('load', clearStorage);

Answer 2

我能够找到解决方案并想到分享。 由于 window.onbeforeunload 事件在浏览器/选项卡关闭时触发，但也在刷新时触发（我不想要），所以我的本地存储也在 rfresh 时被处理。这是我不想要的。为了克服这个问题，我实现了另外 1 个事件处理程序 window.onload，它仅在刷新时触发，而不是在选项卡/浏览器关闭时触发，我将重置 localStorage，就好像什么都没发生一样。代码是：

window.onbeforeunload = function (e) {
    window.onunload = function () {
            window.localStorage.isMySessionActive = "false";
    }
    return undefined;
};

window.onload = function () {
            window.localStorage.isMySessionActive = "true";
};

我在 window.onbeforeunload 中返回了 undefined，因为我不希望在选项卡/浏览器关闭和刷新时出现确认弹出窗口。

Answer 3

检查 window.onbeforeunload 事件和 window.onload 事件之间的时间是否小于 3 秒保持会话有效，否则删除令牌。

window.onbeforeunload = function (e) {

window.localStorage.unloadTime = JSON.stringify(new Date());

};

window.onload = function () {

let loadTime = new Date();
let unloadTime = new Date(JSON.parse(window.localStorage.unloadTime));
let refreshTime = loadTime.getTime() - unloadTime.getTime();

if(refreshTime>3000)//3000 milliseconds
{
window.localStorage.removeItem("token");
}

};

Answer 4

使用cookie解决问题，cookie值会在浏览器关闭时自动删除， 就我而言，我使用的是带有令牌的 API，它存储在 localStorage 中，所以当浏览器关闭或关闭时，它不会注销用户，所以我所做的是

登录后只需使用键“loginstatus”和值“loggedin”设置 cookie

document.cookie = "loginstatus=loggedin";
localStorage.setItem("token", token);

在使用localStorage值检查用户是否登录的方法中

isUserLoggedIn(){
   let session = localStorage.getItem('token');
   if (session == null) {
      return false;
   }else{
      return session
   }
}   

如果 cookie 值不存在，则通过删除 localStorage 令牌进行修改

isUserLoggedIn(){
  // remove token if cookie not set
  if(this.getCookie("loginstatus") != 'loggedin'){
      localStorage.removeItem("token");
  }

  let session = localStorage.getItem('token');
  if (session == null) {
     return false;
  }else{
     return session
  }
} 

成功了！！！

Answer 5

我知道这个问题已经很老了，但也许有人仍然需要它。

这个解决方案并不漂亮，但效果很好：

  @HostListener('window:beforeunload')
  setToSession(): void {
    const token = this.authenticationService.currentTokenValue;
    sessionStorage.setItem('tempToken', JSON.stringify(token));
  }

  @HostListener('window:load')
  clearLocalStorage(): void {
    const session = sessionStorage.getItem('tempToken');
    const user = this.authenticationService.currentTokenValue.user;
    const loginMode = user.loginMode;
    console.log(loginMode);
    if (!loginMode && session == null) {
      console.log('TOKEN REMOVED');
      localStorage.removeItem('token');
      window.location.reload();
    }
  }

关闭/重新加载时会在 sessionStorage 中存储一个临时令牌，重新加载时会查询该令牌。仅当令牌存在且 loginMode 为 false 时，才会删除存储。

Answer 6

请改用SessionStorage。每当关闭选项卡时，它就会被清除。