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

【问题标题】：How to keep applied search filters when user hit the back button or refresh the page?当用户点击后退按钮或刷新页面时，如何保留应用的搜索过滤器？
【发布时间】：2019-10-22 13:04:41
【问题描述】：

我在我的页面上创建了一个搜索引擎，用户可以在其中应用一些过滤器。基本上我所做的是将过滤器添加到列表中并自动将参数添加到 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（保留应用的过滤器）正在丢失它们的值。

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

【问题讨论】：

具有 applyFilters 方法的组件何时初始化？如果您使用 *ngIf 显示/隐藏过滤器模式，那么每次打开它时，您都会创建它的一个新实例。这不是必需的，因此您可以在父组件加载时启动一次。
@Ms.Tamil 用户点击提交按钮时调用该方法
不，我换个说法，你有一个弹出窗口来选择过滤器还是主页的一部分？
我最近有一个类似这个过滤器的需求。但我的问题是即使在离开页面后仍保留应用的过滤器。一个人的肉是另一个人的毒药：P
@LingVu 页面不会重新加载，但是当您离开带有路由器的页面时，页面中的所有组件都会被破坏。

标签： javascript angular

【解决方案1】：

我的建议是：

localStorage：如果您希望过滤器持续更长时间

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

Angular 服务：如果您希望在页面未关闭之前使用过滤器

constructor(private someService: SomeService) {
    // ...

    this.someService.data = this.filterList;

    // ...
}

【讨论】：

【解决方案2】：

在应用/派生过滤器后，您需要将过滤器的值保留为 sessionStorage 或 localStorage。使用本机存储 API 就足够了。

当您的应用初始化时，检查您的网络存储中是否有值并使用存储的值初始化您的过滤器列表。

您的解决方案可能如下所示：

 this.filterList = new Array();

 ngOnInit() {
   const previousFilters = sessionStorage.getItem('FILTER_LIST');
   const filterList = JSON.parse(previousFilters);
   if (filterList) {
     this.filterList = filterList;
   }
 }

 applyFilters(formValue: any) {

    // this.filterList = new Array(); Remove this line since it has been moved to a higher scope

    this.appliedFilters = 0;
    this.filtersStr = '';

    if (formValue.active != null) {
      // ... Do your computations
    }

    if (formValue.idLaboratory != null) {
      // ... Do your computations
    }

    if (formValue.idOwner != null) {
      // ... Do your computations
    }

    if (formValue.machineName != null) {
      // ... Do your computations
    }

    // Then add this bit
    sessionStorage.setItem('FILTER_LIST', JSON.stringify(this.filterList)) 


    this.loadPageRegisters(0);
}

请注意，我在此示例中使用 sessionStorage。如果您希望在关闭浏览器窗口后保留过滤器，请使用 localStorage

如果您想要更强大的解决方案，可以查看https://github.com/PillowPillow/ng2-webstorage

【讨论】：