Question

我创建了一个角度5应用程序。这是使用基于令牌的系统。目前我将令牌存储在localstorage中。我想在浏览器关闭时清除localstorage。并且在浏览器刷新时不清除localstorage。我没有使用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');
 }

Answer 3

我们可以通过以下方法实现这一目标。

在登录之前调用此功能。

在这里，我们检查是否存在任何活动的标签。如果不使用localStorage，并且需要重定向到登录名（我在这里还没有完成重定向）。

checkActiveTabs() {
        let localStorageTabs: TabModel[] = [];
        const sessionTabId: number = Number(sessionStorage.getItem(AppUtils.TAB_ID));
        localStorageTabs = JSON.parse(localStorage.getItem(AppUtils.TABS));
        if(sessionTabId == 0 && localStorageTabs != null){
            let activeTabs = localStorageTabs.find(item => item.status == 1);
            if(activeTabs == undefined){
                localStorage.clear();
            }
        }
    }

要跟踪选项卡，登录后调用以下方法。

 setBrowserTabId() {
        let localStorageTabs: TabModel[] = [];
        const sessionTabId: number = Number(sessionStorage.getItem(AppUtils.TAB_ID));
        localStorageTabs = JSON.parse(localStorage.getItem(AppUtils.TABS));
        if (sessionTabId != 0) { // existing active tabs ?
            if (localStorageTabs != null || localStorageTabs != undefined) {
               localStorageTabs.find(item => item.tabId == sessionTabId).status = 1; //tab is refreshed, setting back to active.
            } 
        } else { //new tab
            const tabId = new Date().getTime(); //tab Id
            sessionStorage.setItem(AppUtils.TAB_ID, JSON.stringify(tabId));
            let tabmodel: TabModel = new TabModel();
            tabmodel.tabId = tabId;
            tabmodel.status = 1; //tab is active
            if (localStorageTabs == null) {
                localStorageTabs = [];
            }
            localStorageTabs.push(tabmodel);
        }
         localStorage.setItem(AppUtils.TABS, JSON.stringify(localStorageTabs));
    }

要设置非活动标签，请在@HostListener上调用它

 @HostListener('window:beforeunload ', ['$event'])
    unloadHandler(event) {
       const sessionTabId = sessionStorage.getItem(AppUtils.TAB_ID);
       const localTabId : TabModel[] = JSON.parse(localStorage.getItem(AppUtils.TABS));
       localTabId.find(item => item.tabId == +sessionTabId).status = 0;
       localStorage.setItem(AppUtils.TABS, JSON.stringify(localTabId));
    }

注意：如果浏览器崩溃或通过Windows Task Manager关闭浏览器，此逻辑将不起作用。

浏览器以角度关闭时清除本地存储

3 个答案: