清除本地存儲在 Angular 7 中不起作用？

Question

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? Angular 有什么特點？

這是我的HTML 文件

<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>

這是我的ts 文件

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

Answer 1

localStorage.removeItem('把你的鑰匙放在這里');

Answer 2

您在此處詢問的內容沒有相關代碼，但如果您想從本地存儲中刪除某些內容，您應該使用localStorage.removeItem('keyOfYourItem') ；

Answer 3

從 localStorage 使用中刪除項目

localStorage.removeItem("key_name");

清除本地存儲，即清空它（刪除存儲在本地存儲中的所有密鑰）

localStorage.clear();

我認為您的代碼中的問題是

1. 您沒有在任何地方清除本地存儲或存儲在本地存儲中的項目
2. 即使您遵循第一點，您也必須在單擊注銷按鈕時從組件中調用您的特定方法，並在組件中清除該方法中的本地存儲

這是你的做法

在 HTML 中：

注銷.component.html

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

在組件中：

注銷.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


}

Answer 4

你可以制作一個 function 來移除所有的鑰匙

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

現在在注銷時調用此 function 以清除您的存儲