angular - 当 localStorage 中的特定键发生更改时通知其他组件 - Angular

Question

我的问题很笼统。我想观察 localStorage 的角度变化，但 localStorage 中的每个键都需要单独观察。

例如，我在 localStorage 中有一些产品列表，_products_比如说，它存储了一系列产品。现在，每当我添加新产品并将其附加到_products_localStorage 中的键时，我希望其他组件知道_products_已修改。

这里有一个解决方案，但它会监视 localStorage 中的所有键。

感谢你的帮助。谢谢。

Answer 1

您应该在所有组件都可以访问的共享服务中定义 localStorage，并使用 Subject 来跟踪 localStorage 内部的更改。特此使用主题的示例

Answer 2

使用主题。

每当您更新产品密钥时，请在主题上调用 next()。

现在在任何其他文件中，如果您想观看对此密钥所做的更改，只需订阅此主题即可；

这是您更新密钥的服务文件中的代码：

@Injectable()
class KeyService {
  let storageObservable = new Subject<Product>();//use anything you want instead of the Product

  .
  .
  .

  methodWhereYouUdateTheProductKey(){
    //do your things
    //
    //
    this.storageObservable.next(newValueOfKey);
  }

  public followProducstKey(): Oservable<Product> {
    return this.storageObservable;
  }
  
}

这是观察该键变化的代码：

this.keyService.followProducstKey.subscribe(
  data => {
    console.dir(data);
    //do anything you want with the data you passed on the next() function
  }
);