Question

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

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

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

Answer 1

您需要在更新本地存储值时更新组件数据。雅？

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

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

所以在你的服务中调用Subject.next（）将消息发送到observable。所以订阅将被通知。

这是一个帮助完整链接。 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是对象，您可以通过名称调用对象： const name = localStorage.getItem（'mean-token'）;并删除它你可以使用： localStorage.removeItem（“平均令牌”）希望如果没有，你可以更好地解释问题

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

在您的组件中。

将新数据设置到本地存储中将触发行为变量，然后将通知订户已进行更改

this.localStorage.setStatus(true);

订阅可观察对象，以便在存储中添加新数据时也将对其进行更新。

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

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

3 个答案: