javascript - 当用户点击后退按钮或刷新页面时如何保留应用的搜索过滤器？

Question

我在我的页面上创建了一个搜索引擎，用户可以在其中应用一些过滤器。基本上我所做的是在列表中添加过滤器并自动将参数添加到 URL。

  applyFilters(formValue: any) {

    this.filterList = new Array();
    this.appliedFilters = 0;
    this.filtersStr = '';

    if (formValue.active != null) {
      this.appliedFilters++;
      this.buildStringFilter('active=' + this.activeSelected.value);
      this.filterList.push(new Filter('active', 'active: ' + this.activeSelected.descricao));
    }

    if (formValue.idLaboratory != null) {
      this.appliedFilters++;
      this.buildStringFilter('laboratory.id=' + this.labSelected.id);
      this.filterList.push(new Filter('idLaboratory', 'Laboratory: ' + this.labSelected.nome));
    }

    if (formValue.idOwner != null) {
      this.appliedFilters++;
      this.buildStringFilter('owner=' + this.ownerSelected.idUsuario);
      this.filterList.push(new Filter('idOwner', 'Owner: ' + this.ownerSelected.nome));
    }

    if (formValue.machineName != null) {
      this.appliedFilters++;
      this.buildStringFilter('machineName=ci(contains(' + formValue.machineName + '))');
      this.filterList.push(new Filter('machineName', 'Machine Name: ' + formValue.machineName));
    }


    this.loadPageRegisters(0);
  }

我面临的问题是，当用户应用过滤器并打开过滤寄存器时，如果他点击后退按钮再次查看过滤列表，应用的过滤器就会消失。 vars filtersStr(保留 URL 参数)和 filterList(保留应用的过滤器)正在丢失它们的值。

当用户点击浏览器中的后退按钮时，我如何保留这些值？

Answer 1

我的建议是:

• localStorage:如果您希望过滤器保留更长时间

  localStorage.setItem('filter', this.filterList.join(',');

• Angular 服务:如果您想在页面未关闭之前使用过滤器

  constructor(private someService: SomeService) {
      // ...
  
      this.someService.data = this.filterList;
  
      // ...
  }