我知道这是一个老问题，但我只是在寻找解决方案，但我找不到任何正常工作的东西。然后我想出了一个解决方案，对我来说效果很好。

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

我刚刚设置了一个函数，用于在加载页面时检查会话存储，如果为空，该函数将清除本地存储；之后，它会将register设置为会话存储，以确保本地存储不会因为重新加载页面而再次被清空。

function clearStorage() {

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

    if (session == null) {

        localStorage.removeItem('remove');

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

我找到了解决这个问题的办法，并想到了分享。由于window.onbepreunLoad事件在浏览器/选项卡关闭时触发，但也在刷新时触发(这是我不想要的)，所以我的本地存储也在rresh时被处理。这是我不想要的。为了克服这个问题，我又实现了一个事件处理程序window.onLoad，它只在刷新时触发，而不是在选项卡/浏览器关闭时触发，在选项卡/浏览器关闭时，我会重置本地存储，就像什么都没有发生一样。代码是：

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

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

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

检查window.onbepreunLoad事件和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");
}

};

使用Cookie来解决这个问题，Cookie值会在浏览器关闭时自动删除，在我的例子中，我使用的是带有令牌的API，它存储在本地存储中，所以当浏览器关闭或关闭它时，不会注销用户，所以我所做的是

登录后，只需使用键‘loginatus’和值‘loggedin’设置cookie即可

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

在使用本地存储值检查用户日志的方法中

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

如果Cookie值不存在，则通过删除本地存储内标识进行修改

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
  }
}

而且成功了！

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

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

这个解决方案不是很好，但效果很好：

@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();
    }
  }

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

另外，印尼语是我的母语，所以如果我不擅长用英语解释，我很抱歉。

如果您想要在选项卡刷新时保持上一个操作，但想在选项卡关闭时清除上一个操作，那么我真的建议您使用会话存储而不是本地存储。因为据我所知，如果您使用本地存储，那么当您清除浏览器历史记录时，您的最后一个操作将被自动清除，这意味着如果您想要手动清除最后一个操作(例如，您希望在选项卡关闭时将其清除)，那么您必须使用localStorage.emoveItem(‘’)。但是..。如果您使用会话存储，那么当您关闭选项卡时，您的上一次操作将被自动清除(即使您从未关闭浏览器)。这意味着，只要你不关闭加载URL/页面的选项卡，你的上一次操作就会一直保持下去。因此，如果您关闭该选项卡(但不关闭浏览器)，只需在新选项卡中再次加载URL/页面，则会话存储将处于其初始值/状态，因为当您关闭该选项卡时，您在会话存储中的上一次操作将自动删除。

如果你想要一个例子，这里是我的完整代码，我通过谷歌搜索了近一周的时间获得的。顺便说一句，我在这里使用运行代码片段检查了结果，所以即使它看起来有问题，也只需尝试在这里保存我的html文件并在浏览器中打开它。因为我使用Visual Studio代码来编辑和运行html文件，即使我在Chrome中打开该文件，它也运行得很好。顺便说一句，如果你想让你的页面对用户更方便，你可以把ALERT(‘’)改成sole.log(‘’)。

function changeVisibility() {
    document.getElementById("imgbox2").style.visibility="visible";
    images = document.getElementById("imgbox2").style.visibility;
    sessionStorage.setItem('imagesVis', images);
    alert("Pt.1 CLICKED; images BECOME VISIBLE");
  }
  // When the user clicks on the button, toggle between hiding and showing the dropdown content
  function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
  }
  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }
  window.onload = function() {
    if(sessionStorage.getItem('imagesVis')) {
      document.getElementById("imgbox2").style.visibility="visible";
      alert("Pt.1 HAS BEEN CLICKED before; images STAY VISIBLE");
    }
    else {
      document.getElementById("imgbox2").style.visibility="hidden";
      alert("Pt.1 NEVER CLICKED before; images STAY HIDDEN");
    }
  }

.imgbox {
  text-align: center;
  width: 100%;
  margin: auto;
  visibility: hidden;
}
button {
  width: 100%;
  font-size: 16px;
  padding: 0;
  border: 0;
  background-color: grey;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
/* Dropdown Button */
.dropbtn {
  background-color: grey;
  border: 4px outset darkgrey;
  color: white;
  padding: 8px;
  font-size: 16px;
  cursor: pointer;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: darkgrey;
  color: black;
  border-style: groove;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  margin: 2em; /* set the position of the dropdown button and its contents */
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: grey;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  height: 9.5em;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 5px 10px;
  text-decoration: none;
  text-align: center;
  display: block;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: darkgrey;
  color: black; font-weight: bold;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Select Part</button>
    <div id="myDropdown" class="dropdown-content">
      <button onclick="changeVisibility()"><a href="#">Pt.1</a></button>
      <a href="#">Pt.2</a>
      <a href="#">Pt.3</a>
      <a href="#">Pt.4</a>
      <a href="#">Pt.5</a>
      <a href="#">Pt.10</a>
      <a href="#">Pt.50</a>
      <a href="#">Pt.100</a>
    </div>
  </div>
  <div class="imgbox" id="imgbox2">
    <div style="background-color: #484444; max-height: 15em; overflow: auto; width: max-content; margin: auto;">
        <a style="display: flex; padding: 0; text-align: center;"><img border="0" data-original-height="5469" data-original-width="575" src="https://static.wikia.nocookie.net/naturerules1/images/7/7b/White-persian-cats-picture-id637190306.jpg/revision/latest?cb=20210426035333"></a>
        <a style="display: flex; padding: 0; text-align: center;"><img border="0" data-original-height="5458" data-original-width="576" src="https://cdn.pixabay.com/photo/2022/03/16/07/45/turkish-angora-7071832_1280.jpg"></a>
        <a style="display: flex; padding: 0; text-align: center;"><img border="0" data-original-height="5466" data-original-width="575" src="https://images.unsplash.com/photo-1612356700139-ba3b20f5f468?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bHlueHxlbnwwfHwwfHw%3D&w=1000&q=80"></a>
    </div>
  </div>