在我的Angular 2应用程序中，我订阅了组件的ngOnInit生命周期中的一个observable，以便将一系列记录打印到表格显示中 . 这是按预期工作的：

ngOnInit() {
    this.filtersService.getRecords(this.page, this.pagesize, this.body)
        .subscribe(resRecordsData => {
                    this.records = resRecordsData;
                },
                responseRecordsError => this.errorMsg = responseRecordsError
        );
}

我也有一些关于这个组件的过滤器 . 因此，一旦用户打开组件，他们就可以进一步过滤数据 . 数据按预期过滤，即使用户通过各种结果页面分页（我每页加载12个结果），也会应用过滤器 . 我通过post请求过滤，我通过“this.body”传递给API：

getRecords(page, pagesize, body) {
    return this.api.obsPost(this.strReq, page, pagesize, body);
}

这是在我分页时（即所选过滤器继续过滤数据），因为仍然挂载相同的组件，我只是传入“页面”：

private pageChange(page) {
    this.filtersService.getRecords(page, this.pagesize, this.body)
        .subscribe(resRecordsData => {
                    this.records = resRecordsData;
                },
                responseRecordsError => this.errorMsg = responseRecordsError
        );
}

我遇到的问题是，如果用户然后打开另一个组件，然后再说30秒后，再次单击与第一个组件相关的选项卡（因为该选项卡位于视图中作为背景选项卡），它将重新安装组件，有效地擦除所应用的任何过滤器（以及他们可能使用的任何分页） .

换句话说，如果他们已经应用了一个过滤器，并移动到组件1中的结果的第5页，当他们再次单击选项卡时（在使用不同的组件/视图之后），组件将重新安装并因此加载应用零过滤器后，它将返回结果的第1页 .

我想找到一种方法以某种方式缓存第一个组件的状态，这样当他们再次点击组件1的那个选项卡时（因为它在另一个组件上作为背景选项卡位于那里），他们将获得结果他们最后一次看到它们（即，根据我的例子，应用了一个过滤器，结果的第5页） .

我该怎么做呢？另外，因为我不希望它永久地维护这些过滤结果，所以我认为在会话存储中执行此操作是有意义的 . 有一个相当直接的方法来做到这一点？

javascript angular typescript session-storage