Angular语言 - 如何始终在本地存储中获取最新数据

Question

我知道SO上有很多关于这个问题的问题，但直到现在我还没有找到任何可以解决这个问题的话题。基本上，我有一个服务负责从服务中获取数据并保存在本地，还有一个组件来显示这些数据。但是每次我发送新请求时，组件都会显示旧数据而不是新数据。我已经尝试过：

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

但即使这样也能解决这个问题。

Answer 1

那么，您需要在本地存储值更新时更新组件数据。你？

在 Angular 中，没有绑定到本地存储。换句话说，每次更新时，您都必须从本地存储中获取项目值。

因此，我建议您导入服务并订阅主题，以便任何更改都可以传播到组件。

所以在你的服务中调用 Subject.next(( 将消息发送到可观察的。因此，订阅将收到通知。

这是一个帮助完整链接。http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject

Answer 2

据我所知，您想首先显示本地存储的数据，您需要像那样在本地保存数据localStorage.setItem('mean-token'， token(;mean-token 是名称，token 是对象，你可以用 name 来调用对象：const name = localStorage.getItem('mean-token'(;要删除它，您可以使用：localStorage.removeItem('mean-token'(希望这是工作，如果不是，你能更好地解释问题

Answer 3

我正在使用 ngx-webstorage-service

您需要初始化一个 Observable 方法，该方法返回一个 Subject 变量来跟踪本地存储服务中的更改。

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

在您的组件中.ts

将新数据设置到本地存储将触发 Behavior 变量，然后通知订阅者进行了更改

this.localStorage.setStatus(true);

订阅可观察量，以便每当存储添加了新数据时，它也会更新。

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