I created a search engine on my page where user can apply some filters. Basically what I do it's to add the filters apllied in a list and automatically adding the parameters to 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);
  }

The problem I'm facing on this is when the user applys the filters and opens a filtered register, if he hits the back button to see the filtered list again, the applied filters disappear. The vars filtersStr (keeps the URL params) and filterList (keeps the Filters applied) are losing their values.

How could I keep that values when the user hits back button in the browser?

I created a search engine on my page where user can apply some filters. Basically what I do it's to add the filters apllied in a list and automatically adding the parameters to 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);
  }

The problem I'm facing on this is when the user applys the filters and opens a filtered register, if he hits the back button to see the filtered list again, the applied filters disappear. The vars filtersStr (keeps the URL params) and filterList (keeps the Filters applied) are losing their values.

How could I keep that values when the user hits back button in the browser?

• javascript
• angular

• When the ponent which has applyFilters method initialized? If you show/hide the filter modal with *ngIf, then each time you open it you'll create a new instance of it. That is not necessary so you can initiate it once when the parent ponent loads. – Ms.Tamil Commented Oct 22, 2019 at 13:08
• @Ms.Tamil The method is called when the user hits the submit button – Andre Commented Oct 22, 2019 at 13:09
• No, Let me rephrase, do you have a popup window to select the filters or is it part of the main page? – Ms.Tamil Commented Oct 22, 2019 at 13:12
• I recently had a requirement like this filter. But my problem was the applied filters retained even after navigated away from page. One person's meat is another person's poison :P – Ms.Tamil Commented Oct 22, 2019 at 13:14
• 1 @LingVu The page will not reload, but when you navigate away from a page with router, all the ponents in the page will be destroyed. – Ms.Tamil Commented Oct 22, 2019 at 13:20

2 Answers 2

My suggestion would be:

• localStorage: if you want that your filters persist for longer time

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

• Angular services: if you would like to have filters until the page is not closed

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

You need to persist the value of your filters to sessionStorage or localStorage after you apply/derive them. Using the native Storage APIs should suffice for this.

When your app initializes, check if there is a value in your web storage and initialize your filter list with the stored value.

Your solution could then look something like this:

 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 putations
    }

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

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

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

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


    this.loadPageRegisters(0);
}

Note that I'm using sessionStorage in this example. If you want the filters to be persisted after you close the browser window, then use localStorage

If you want a more robust solution, you can take a look at https://github./PillowPillow/ng2-webstorage