Javascript 在Angular 2应用程序中缓存组件数据

我正在使用observables在Angular 2应用程序中加载数据，现在我正在尝试找出如何使用组件的最后缓存版本（本地存储中的内容），以便当用户单击新选项卡（离开组件），然后再次触发组件的打开（返回）-他们获得组件的最后状态

在这种情况下，这一点尤其重要，部分原因是页面上有根据用户选择过滤数据的过滤器。因此，当它们返回到组件时，我希望这些过滤器仍然应用于数据

这是从组件发出的调用，其中我使用Angular的OnInit生命周期钩子订阅了observable：

ngOnInit() {
    this.filtersService.getByFilter(this.page, this.pagesize, {
            'services.workflow.status' : 'consulting'
            })
            .subscribe(resRecordsData => {
                this.records = resRecordsData;
            },
            responseRecordsError => this.errorMsg = responseRecordsError);

}

这是来自服务的可观察API调用：

getByFilter(page, pagesize, body) {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: this.headers });
    return this.http.post
    (`${this.url}${this.ver}/customers/search?apikey=${this.key}&page=${page}&pagesize=${pagesize}`,
    body, options)
        .map((res: Response) => res.json())
        .catch(this.filterErrorHandler);
}
    filterErrorHandler(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error').share();
}

---

对于Angular 2，我以前从未遇到过这样的缓存情况。它是否像执行if检查以查看本地存储是否包含相关数据那样简单？或者是否有一种特定角度的机制，我只能在特定条件下（例如，如果自上次打开组件以来数据发生了变化）重新加载组件？

有几种选择：

1） 使用服务。我这里有一个简单的例子：

2） 路由参数。您可以指定必需、可选或查询参数。有关更多信息，请参见此：

---

3） 在您的情况下，还有另一个选项，即添加它/从本地存储重新检索它。但是上面两个选项的性能可能更好。

我建议您使用localStorage作为存储选项进行检查。这样，即使用户刷新页面，他们仍然可以保留数据。我喜欢ngrx。但在这种特殊情况下，这将是过分的。很好的选择。我将做更多的研究，看看在我的特定用例中哪一个最有效。谢谢