Angular 5将http数据存储在本地存储器中

我希望尽可能减少来自应用程序的网络请求数量。为此，我考虑将GET API中的数据存储到浏览器的本地存储中。我考虑在服务中这样做，以便每当有GET API请求时，应用程序首先检查本地存储，如果数据不存在，则只发出网络请求。在这里，我很困惑如何将数据存储在本地存储器中，即如何保存来自网络请求的数据，然后将数据发送给订户。我知道.pipe（）方法，但不知道用于保存数据的rxjs运算符

---

TIA

非常简单-是的，您应该使用

管道

return http.get("something").pipe(
   tap(value=>save your value in local storage)
)

---

tap

与

subscribe

具有相同的签名（参数），用于查看管道中的值-您可以说它的行为类似于subscribe，但没有实际的subscribing。

我正在一个与您的需求类似的实现中工作

现在，在登录之后，我获取所有不常用的数据，比如辅助表，并将它们保存到localstorage。你不需要这样做，你可以把它们放在内存中，我这样做是因为我还保存了令牌，有效期为1小时。如果关闭浏览器并重新打开，我将检查令牌是否存在且有效，如果存在，我将跳过登录。在这种情况下，我从localstorage读取所有辅助表数据

所以在登录之后，我调用服务的InitCache方法

InitCache() {
  this.http.get<IEmpresa[]>(
     this.url() + 'empresas',
     { headers: this.getAuthHeaders() }
  ).subscribe(
     data => {
        this.cache.Empresas = data;
        this.SaveToLocalStorage("Empresas"); // This is only needed if you skip login
     } 
  )
...other gets
}

这工作正常，但我不喜欢它，因为您需要注销/登录以刷新数据，或者更糟的是，单击按钮AJJ

新的进行中解决方案：当我使用asp.net内核作为后端时，我实现了signalR。我会尽力解释它的作用

当angular应用程序启动时，它连接到signalR hub，并等待消息。在端点的每个控制器中，当我修改辅助表时，我会向客户端发送一条消息，通知“this”表已更改，请更新缓存

angular应用程序接收此消息，进行get调用，更新其缓存并保存到localstorage。和最重要的是，服务中的方法现在是一个行为主体，这意味着当接收到更新时，它将被发送给所有订阅者（我在组件中订阅此数据）

---

我希望我能把这个想法用文字表达出来。

这将节省本地存储的价值，但每次都会打一个网络电话？我猜OP希望返回存储在localStorage中的数据（如果存在）。但是如果它在http calltap之前输出，则只有在您订阅时才会获得值，因此这将不起作用。@wFitz，请告诉我，如果没有数据请求（订阅），您为什么要做任何事情？没有订阅，也不会发出@wFitz请求，那么您在这里的目的是什么？

Empresas() {
   return this.cache.Empresas;
}