Clear local storage is not working in Angular 7?

clear localstorage on browser close angular 6
how to clear session storage in angular 7
how to clear local storage
how to update local storage data in angular 6
localstorage removeitem not working
clear local storage on page refresh
how to use local storage in javascript
angular local storage

Clear local storage when click on logout button is not working, also I am not doing it with controller files I use only .ts and .HTML also I am having error while making function does there nay method to do it without making function too? Any feature of Angular?

Here is my HTML file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.315" width="20">
                    <g id="logout"  transform="translate(0
                       -1.66)" > </svg>

Here is my ts file

  public articlepara = { clientid: localStorage.getItem('storageselectedclient'), page: 1, type: 'All', keytype: '', sortdate: 'asc', sortpub: '', sortnews: '', fromdate: this.fromdate, todate: this.todate, publicationFilter: '', sortprominence: '' }
  user = {
    email: localStorage.getItem('email')
  }


  constructor(public article: ArticleService, http: HttpClient, elementRef: ElementRef, public _client: ClientService, private spinnerService: Ng4LoadingSpinnerService, private helper: HelperService, excelService: ExcelService, private filterPipe: FilterPipe) {
  }

  ngOnInit() {

    $("#reset").hide();
    var self = this;
    // $(document).ready(function(){
    $("#dateclick").click(function () {
      $('#rangeCal').toggle();
    })
    updateConfig();
    function updateConfig() {
      var options: { dateLimit: String } = {
        dateLimit: ""
        //,minDate: moment().subtract(365, 'days') , maxDate: moment() 
      };
      $('#config-demo').daterangepicker(options, function (start, end, label) {

        var startDateRange = end.format('YYYY-MM-DD');
        var endDateRange = start.format('YYYY-MM-DD');
        self.articlepara.todate = endDateRange;
        self.articlepara.fromdate = startDateRange;
        self.spinnerService.show();

        self.isActiveToday = false;
        self.isActive7Days = false;
        self.isActiveYesterday = false;
        self.isActivedaterange = true;
      });
    }
    //  });

    this.articlepara.type = 'ALL';
    this.articlepara.keytype = '';
    // this.articlepara.prominance = '';
    // this.articlepara.company = '';
    // this.articlepara.author = '';
    this.articlepara.publicationFilter = '';

    this.Clients();  //uncomment for client list
    this.selectedclient = localStorage.getItem('storageselectedclient');

    this.spinnerService.show();

  }
  Clients() {
    //console.log(this.user);
    // this.spinnerService.show();
    this._client.getClients(this.user)
      .subscribe(
        res => {
          // console.log(res);
          this.clientlist = res;
        },
        err => {
          console.log(err);
        },
        () => {
          // this.getallarticles();
          this.spinnerService.show();
          this.getUserDetails();
        }
      )
  }
  getUserDetails() {
    var postData = {
      clientid: localStorage.getItem('storageselectedclient'),
      email: localStorage.getItem('email')
    }

    this.article.getUserDetails(postData)
      .subscribe(
        res => {
          // console.log(res);
          this.userdetails = res[0];
        },
        err => {
          console.log(err);
        }
      )
    this.getUserClientDetails();
  }
  getUserClientDetails() {
    var postData = {
      clientid: localStorage.getItem('storageselectedclient')
    }

    this.article.getUserClientDetails(postData)
      .subscribe(
        res => {
          // console.log(res);
          this.userClientdetails = res[0];
          this.spinnerService.hide();
        },
        err => {
          console.log(err);
        }
      )
  }
  //=======================change selectd client form dropdownlist=============================//
  changeclient(value) {
    localStorage.setItem('storageselectedclient', value);
    localStorage.removeItem('storageselectedclient')
    this.spinnerService.show();
    this.getUserDetails();
  } 

to drop an item from localStorage use

localStorage.removeItem("key_name");

to clear local storage i.e to empty it (to remove all keys stored in local storage)

localStorage.clear();

I think problem in your code is

  1. You are not Clearing local storage or item stored in local storage anywhere
  2. Even if you follow 1 st point you have to call your specific method from component on click of logout button and clear local storage in that method in the component

here is how you do it

In HTML:

logout.component.html

<button id="logout" (click)="logoutUser()">Logout</button>

In component:

logout.component.ts

//your rest component code

logoutUser(){

    //clear local storage
    localStorage.clear();

    //or
    //remove an key from local storage
    localStorage.removeItem("your_key);

    //things that you want to do for logout


}

How to delete a localStorage item when the browser window/tab is , the key before the browser window/tab is closed and prompts you to confirm the close window/tab action. Simply clear everything in Storage & Session when somebody logs out (what makes sense to me because when I logout I WANT that everything gets deleted. And that should solve the problems.) What you suggested in your post on the 21.


localStorage.removeItem('put your key here');

Storage clear() Method, you can use localStorage.removeItem('currentGame');. Alternatively, you can also clear the whole localStorage with localStorage.clear();. Introduction to localStorage and sessionStorage localStorage and sessionStorage , part of the web storage API, are two great tools to save key/value pairs locally. If you click the save button at the top of this post, localStorage is what’s used to store your saved posts.


There is no relative code for what you are asking here, but if you want to remove something from local storage you should be using localStorage.removeItem('keyOfYourItem');

How to destroy localStorage item- Angular, More Examples. Example. The same example, but using session storage instead of local storage. Remove all session items: sessionStorage  This tutorial help to create simple angular 4 application with localstorage.This application will use webstorage service plugin to store variable data into the browser, that can use HTML 5 local storage, Session storage or In-memory mechanism to store data.


You can make a function for removing all the keys

  removeAllLocalStorage() {
        localStorage.removeItem('key1');
        localStorage.removeItem('key2');
        localStorage.removeItem('key3');
        localStorage.removeItem('key4');
    }

Now call this function on logout to clear your storage

Window localStorage Property, Example. Create a localStorage name/value pair with name="lastname" and The data will not be deleted when the browser is closed, and will be available the​  Why your Angular App is not Working: 11 common Mistakes. Resolving problems of your angular application can be very challenging. When your angular app is not working and all it gives you are some cryptic red lines in a console. Especially when you are a beginner, these problems can turn the development process with angular into a real pain.


js remove all local storage Code Example, Get code examples like "js remove all local storage" instantly right from your google search results with the Grepper Chrome Extension. This is a simple Angularjs tutorial to read and write data into HTML5 local storage. The Angularjs framework already have module angular-local-storage that help to access to the browsers local storage.I will not use third party angular module for local storage. The HTML5 Local storage data is available in the browser to all windows with the same.


How to clear localstorage in angular 6, IE 7,8), you should use cookies, but if you are building a phonegap application HTML5 local storage Angular 2; angular - local storage not working; Angular JS  Today we are going to create a simple app in which we are going to save user data in local storage using Angular 7|8|9 and Firebase real-time database. I will be showing you how you can maintain the user state even after you refresh the page in the Angular and Firebase.


Storage.removeItem(), A DOMString containing the name of the key you want to remove. Return value. undefined . Example. The following function creates three data  Local storage provides at least 5MB of data storage across all major web browsers, which is a heck of a lot more than the 4KB (maximum size) that you can store in a cookie. This makes local storage particularly useful if you want to cache some application data in the browser for later usage.