Javascript 返回Angular 2应用程序中的选项卡时重新加载组件的缓存会话存储结果

在Angular 2应用程序中，我订阅了组件Ngonit生命周期中的一个可观察项，以便将一系列记录打印到表格显示器上。这是预期的工作：

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

我在这个组件上也有一些过滤器。因此，一旦用户打开组件，他们就可以进一步过滤数据。数据按预期进行筛选，并将应用筛选，即使用户在不同页面的结果中分页（我每页加载12个结果）。我通过post请求进行过滤，我通过“this.body”将其传递给API：

这在我分页时起作用（即，所选过滤器继续过滤数据），因为相同的组件仍在安装中，我只是传入“页面”：

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

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

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

我该怎么做呢？另外，因为我不想让它永久地维护这些过滤结果，所以我认为在会话存储中这样做是有意义的。有没有一种相当简单的方法可以做到这一点

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
        );
}