Angular - 如何始终在 localStorage 获取最新数据？

Question

I know that there is a lot of questions on SO talking about this issue, but until now I didn't find any topic that could solve this problem. Basically, I have a service responsible for get data from service and save locally and a component to show this data. But every time I send a new request the component show the old data instead of the new. I already tried to:

localStorage.removeItem(this.dataToShow);
localStorage.setItem(this.dataToShow, JSON.stringify(content));

But even this solve this issue.

Answer 1

Well you need the component data updated by the time the local storage value updated. Ya ?

In Angular there is no binding to local storage. In other words you have to get item value from local storage every time it is updated.

So I suggest you to import the service and subscribe to a subject so any change can be propagate to component.

so In your service call Subject.next() to send message to observable. so the subscribe will be notified.

Here is a help full link. http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject

Answer 2

Well from what i could understand you want to show the data stored locally first you need to save the data locally like that localStorage.setItem('mean-token', token); mean-token is the name and token is the object and you can call the object by the name : const name = localStorage.getItem('mean-token'); and to remove it you can use : localStorage.removeItem('mean-token') hope thats work if not can u explain the probleme better

Answer 3

I'm using ngx-webstorage-service

You'll need to initialize an Observable method which returns a Subject variable to track changes in your Local Storage service.

import { Observable, Subject } from 'rxjs';
import { LOCAL_STORAGE, StorageService } from 'ngx-webstorage-service';
import { Inject, Injectable } from '@angular/core';

// Key used to access status in local storage
const STATUS_STORAGE_KEY = 'status_test';

@Injectable()
export class LocalStorageService {
  private storageStatus = new Subject<string>();
  constructor (
    @Inject(LOCAL_STORAGE)
    private storage: StorageService)
  {}

  watchStorage(): Observable<any> {
    return this.storageStatus.asObservable();
  }

  // Set Method
  public setStatus(status: boolean) {
    this.storage.set(STATUS_STORAGE_KEY, status);
    this.storageStatus.next('changed'); // tell subscribers storage status is updated
  }

  // Get Method
  public getStatus() {
    return this.storage.get(STATUS_STORAGE_KEY);
  }
}

In your component.ts

Setting new data into local storage will trigger the Behavior variable and subscribers will then be notified that changes are made

this.localStorage.setStatus(true);

Subscribe to the observable so that whenever the storage has new data added in, it will be updated as well.

this.localStorage.watchStorage().subscribe(() => {
  this.updatedStatus = this.localStorage.getStatus();
})