Question

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

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

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

Answer 1

我能够找到解决方案并想到分享。由于window.onbeforeunload事件在浏览器/选项卡关闭时触发但在刷新时也是（我不想要的）事情是我的本地存储也在rfresh时处理。我不想要的。为了克服这个问题，我实现了另外一个事件处理程序window.onload，它只在刷新时触发，而不是在tab / browser关闭，我将重置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 2

检查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 3

我知道这是一个古老的问题，但是我只是在寻找解决方案，但没有找到任何能正常工作的方法。然后我想出了一个解决方案，它对我来说很好用。

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

我只是设置了一个函数，该函数在页面加载时检查sessionStorage，如果为空，该函数将清除localStorage，然后将其设置为sessionStorage寄存器，以确保不会仅出于以下目的再次清空localStorage重新加载页面。

function clearStorage() {

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

    if (session == null) {

        localStorage.removeItem('remove');

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

Answer 4

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

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

1>cl /c /O2 /D NDEBUG /D _CONSOLE /D _UNICODE /D UNICODE /EHsc /MD /std:c++latest /Gd /TP /experimental:module /ifcSearchDir "C:\Program Files (x86)\Microsoft Visual Studio\2019\Preview\VC\Tools\MSVC\14.28.29304\ifc\x64\Release" ConsoleApplication1.cpp
1>ConsoleApplication1.cpp
1>ConsoleApplication1.cpp(1): fatal error C1011: cannot locate standard module interface. Did you install the library part of the C++ modules feature in VS setup?
1>Done building project "ConsoleApplication1.vcxproj" -- FAILED.

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

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

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

isUserLoggedIn(){
   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 中存储一个临时令牌，在重载时进行查询。仅当token存在且loginMode为false时，存储被删除。

Answer 6

改为使用SessionStorage。每当关闭选项卡时，它将清除。

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

6 个答案: