当浏览器关闭时清除本地存储

Question

我创建了一个angular 5应用程序。这是使用基于令牌的系统。当前我将令牌存储在本地存储中。我希望在关闭浏览器时清除本地存储。并在浏览器刷新时不清除本地存储。之所以不使用sesionstorage，是因为在新标签页或窗口中打开页面会导致新会话的启动。我该如何使用app.component中的这段代码尝试

@HostListener('window:beforeunload', ['$event'])
  beforeunloadHandler(event) {
  alert("KKk")
  localStorage.removeItem('authToken');
}

但是当浏览器关闭时并不会触发。实现此用例的最佳方法是什么。如果使用令牌，是否使用cookie存储是一个好方法

Answer 1

你应该那样做...

import { Component, HostListener } from "@angular/core";

@Component({
    selector: 'app-root',
    templateUrl:"./app/app.component.html"
})

export class AppComponent {
    @HostListener("window:onbeforeunload",["$event"])
    clearLocalStorage(event){
        localStorage.clear();
    }
}

注意：onBeforeUnload在浏览器关闭事件上执行

Answer 2

尝试使用 onDestroy，当指令、管道或服务被销毁时执行。

ngOnDestroy() { 
      alert("KKk")
      localStorage.removeItem('authToken');
 }