web-dev-qa-db-ja.com

angular

angular 5アプリケーションを作成しました。これはトークンベースのシステムを使用しています。現在、トークンをlocalstorageに保存しています。ブラウザが閉じたときにlocalstorageをクリアしたいのですが、クリアしないでください。ブラウザが更新されたときのローカルストレージ。sesionstorageを使用しなかった理由は、新しいタブまたはウィンドウでページを開くと、新しいセッションが開始されるためです。これを行うにはどうすればよいですか？app.componentでこのコードを試してみました

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

ただし、ブラウザーが閉じても起動されません。この使用例を実現するための最良の方法は何ですか。トークンの場合、Cookieストレージを使用することは良い方法かどうか

angularlocal-storage
5
Senchu Thomas

あなたはそのようにすべきです...

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はブラウザの閉じるイベントで実行されています

7
Umar Tariq

以下のアプローチでこれを実現できます。

ログイン前にこの関数を呼び出します。

ここでは、アクティブなタブが存在するかどうかを確認します。 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タスクマネージャーを介して閉じた場合は機能しません。

1
user630209

OnDestroyで試してください。これは、ディレクティブ、パイプ、またはサービスが破棄されたときに実行されます。

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