如果localStorage item为null，设置item，否则返回Observable中的item？答案

【问题标题】：If localStorage item is null, set item, otherwise return item in Observable?如果localStorage item为null，设置item，否则返回Observable中的item？
【发布时间】：2019-01-11 06:14:32
【问题描述】：

我正在开发一个 Angular 6 应用程序，我想将常用但很少更改的对象数组存储在 localStorage 中。我有一个服务类，用于从 Web 服务中检索这些数组。服务中的函数返回 observables。我想检查 localStorage 以查看阵列是否已经存在。如果不是，那么我想从 Web 服务获取数组并将 localStorage 项设置为返回值。如果它已经存在，只需返回存储的内容。我正在努力解决如何从该条件的所有可能分支返回一个可观察的。好像有人已经做过了，但我找不到任何这样的例子......

这是我现有的用于返回这些数组之一的函数：

getApprovalRoutes(): Observable < ApprovalRoute[] > {
  if (!localStorage.getItem("allRoutes")) {
    this.http.get < ApprovalRoute[] > (`${this.baseUrl}/Routes`).subscribe(ar => {
      localStorage.setItem("allRoutes", JSON.stringify(ar));
      return Observable.from(ar);
    });
  } else {
    return Observable.from(JSON.parse(localStorage.getItem("allRoutes")));
  }
}

当我运行它时，我收到以下错误：

无法读取未定义的属性“订阅”

感谢您的帮助！

【问题讨论】：

由于与这个特定应用程序有关的原因，我们需要在此处返回一个可观察对象。

标签： angular local-storage observable

【解决方案1】：

this.http.get < ApprovalRoute[] > (`${this.baseUrl}/Routes`).subscribe(ar => {
  localStorage.setItem("allRoutes", JSON.stringify(ar));
  return Observable.from(ar);
});

上面没有返回一个可观察的。您不能将订阅者中的值返回给函数的调用者。

return Observable.from(JSON.parse(localStorage.getItem("allRoutes")));

上面使用from() 将值数组转换为单独发出的值。这与发出数组的返回类型 Observable<ApprovalRoute[]> 不匹配。

根据我在您的示例中看到的内容。我想也许这就是你想要的。

getApprovalRoutes(): Observable<ApprovalRoute[]> {
    return of(localStorage.getItem('allRoutes'))
        .pipe(
            switchMap(routes => {
                if (!routes) {
                    return this.http.get<ApprovalRoute[]>(`${this.baseUrl}/Routes`)
                        .pipe(tap(ar => localStorage.setItem('allRoutes', JSON.stringify(ar))));
                }
                return of(JSON.parse(routes));
            })
        );
}

您想从 localStorage 发出值，如果该值为空，则切换到 HTTP 请求。进入 HTTP 结果并将其放入存储中。

【讨论】：

是的，这正是我想要的。谢谢！