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

Question

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

TIA

Answer 1

这很简单 - 是的，你应该使用pipe

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

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

Answer 2

我正在进行类似于您的要求的实施。

现在，登录后，我获得了所有不常见的数据，如辅助表，并将它们保存到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
}

然后我在服务中有一个方法，当我需要那些数据时我会调用它。

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

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

新的进展解决方案：因为我使用asp.net核心作为后端，我实现了signalR。我会尝试解释它的作用。

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

angular应用程序接收此消息，进行get调用，更新其缓存并保存到localstorage。而且......最重要的是，服务中的方法现在是一个BehaviourSubject，这意味着当收到更新时，它会被分派给所有订阅者（我在组件中订阅了这些数据）。

我希望我能说出这个想法。