浏览器关闭时清空本地存储

Question

我创建了一个角度为 5 的应用程序。这是使用基于令牌的系统。目前我将令牌存储在本地存储中。我希望在浏览器关闭时清除本地存储。并且在浏览器刷新时不清除 localstorage。我没有使用 sessionstorage 的原因是因为在新选项卡或窗口中打开页面将导致启动新会话。我该怎么做 我在 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

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

登录前调用此函数。

这里我们检查是否存在任何活动选项卡。如果不清除 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 任务管理器关闭，此逻辑将不起作用。

Answer 3

你应该那样做。

添加 AppComponent

export class AppComponent implements OnInit{


 constructor() {   
    window.onbeforeunload = function() {
      localStorage.clear();
      return '';
    };
  }
}

Answer 4

你可以使用

sessionStorage

而不是

localStorage

.

它们之间的主要区别在于，

localStorage

即使在浏览器关闭后仍保留数据，而

sessionStorage

仅保留当前会话的数据。当浏览器选项卡关闭时，存储在

sessionStorage

中的数据会自动删除。

Answer 5

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

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