时间戳

首页 > 解决方案 > 我应该什么时候在 Angular 中设置 localStorage？

javascript - 我应该什么时候在 Angular 中设置 localStorage？

问题描述

我有一个员工列表EmployeesComponent，每条记录都有“教育概览”和“工资概览”按钮。当我单击其中一个概览按钮时，它会转到第OverviewComponent一个，然后将相应的组件（薪水或教育）加载到此OverviewComponent. 每个薪水和教育组件上还有一个“返回”按钮。结构如下图所示：

组件

问题是：当我回到 时EmployeesComponent，我需要重新加载分页参数，例如导航到概览页面之前的最后一个页码。为此，我使用localStorage并检查EmployeesComponent.

searchParams: any;

ngOnInit() {
  let searchParams = JSON.parse(localStorage.getItem('routeParams'))?.searchParameters;
  if(searchParams){
    this.searchParams = searchParams;
    window.localStorage.removeItem('routeParams'); // remove routeParams from localStorage
  
  // load list using this.searchParams
}

但是我将页面参数保存在 上，OverviewComponent以便为薪水和教育页面使用一个地方。我认为这不是一个好方法，它可能会导致 localStorage 项目混合使用，因为它们使用相同的密钥（出于某种原因，我有时需要使用相同的密钥）。

那么，我应该在导航到概览页面之前设置分页参数EmployeesComponent吗？然后在加载时检查它们EmployeesComponent？这种情况的正确方法是什么？

标签： javascriptangularecmascript-6routeslocal-storage

解决方案

您可以在路由中使用查询参数。因此，现在当您从employess componentto重定向时overViewComponent，基于点击，即Education Overview或Salary Overview只需发送带有 url 的查询参数。

然后现在当您返回时employess component，只需使用您输入的查询参数值overView component，您就可以获得您想要返回的信息employess component。

Q-在本地存储中添加和删除分页项最合适的位置是什么

A- 添加和删除 localstorage 项目的最合适的地方是它得到改变的地方。在您的情况下，只需在 overView 组件中设置 localstorage 即可在此函数中获取参数（ this.activateRoute.params() ）。并删除员工组件的 ngOnInit 函数上的 localstorage。

推荐阅读