CODEWITHSUNDEEP
angularlocal-storage
Senchu Thomas
Senchu Thomas

Reputation: 568

Clear local storage when the browser closes in angular

I have created an angular 5 application. Which is using a token based system.Currently I am storing the token in the localstorage.I want the localstorage to be clear when the browser closes. and not clear the localstorage when the browser refreshes.The reason that I didn't use sesionstorage is because opening a page in a new tab or window will cause a new session to be initiate. How can I done this I tried with this code in app.component 

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

But it is not firing when the browser closes.What is the best method to achieve this use case. Whether using cookie storage is a good method in case of tokens

Upvotes: 7

Views: 32944

Answers (5)

Alexandru Badea
Alexandru Badea

Reputation: 23

You could use sessionStorage instead of localStorage.

The main difference between them is that localStorage persists data even after the browser is closed, while sessionStorage only persists data for the current session. When the browser tab is closed, the data stored in sessionStorage is automatically deleted.

Upvotes: 1

Ilyas Hussain
Ilyas Hussain

Reputation: 1

You should do it that way.

Add in AppComponent

export class AppComponent implements OnInit{


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

Upvotes: 0

user630209
user630209

Reputation: 1207

We can achieve this through the below approach.

Before Login call this function.

Here we check whether Is there any active tab present. If not cleat the localStorage and if required redirect to login(I have not done redirecting here).

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

To keep track of the tabs, once logged in invoke the below method.

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

To set inactive tab, invoke this on @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));
    }

Note: This logic will not work if browser crashed or if browser closed through windows task manager.

Upvotes: 2

Umar Tariq
Umar Tariq

Reputation: 1297

You should do that way...

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

Note : onBeforeUnload is executing on browser close event

Upvotes: 10

jonhid
jonhid

Reputation: 2135

Try with onDestroy, this gets executed when a directive, pipe or service is destroyed.

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

Upvotes: 0

Related Questions