Bind value to dynamic dropdown, from localStorage - AngularJs

Issue

I have this project, with VB for backend and AngularJS for the frontend. 1 of the issues i am tasked to fix is a dropdown that doesn't keep it's values after i change page and then go back to said page.

In more detail:

• i have a list coming from the backend - VB, with all the data i need.
• i have a view that has a 4 dropdowns to apply filters to the page .
• i apply a filter or a combination of filters to see only the desired applications.
• i click on an application and therefore i am redirected to the page of said application.
• i do all i have to do there and so i click the browser back button to go to the list of all the applications.
• the filters are lost and i need to still have them active.
• List item

<select id="issue1"
     ng-model="RecordStatus"
     ng-change="RecordStatusSelection(RecordStatus.ID_RecordStatus)"
     ng-options="RecordStatus.RecordStatusDesc for RecordStatus in MyDiversionESDList
   | unique:'RecordStatusDesc'
   | orderBy:'+RecordStatusDesc'">
   <option id="issue1" value="">-- Όλες --</option>
</select>

what i have done so far:

• i bind the value of each dropdown (each filter to be exact) in localStorage
• the localStorage values change along with the dropdowns

What i need is to have the values of localStorage apply to said dropdown, so that each filter can still be applied when i go back to this page.

More code to help you, help me:

1. js code, inside the controller - where i get the filter and save it in localStorage

$scope.RecordStatusSelection = function (recordStatus) {
        $scope.filterScope.ID_RecordStatus = recordStatus; 
        localStorage.setItem('sessionIdRecordStatus', recordStatus);
        return $scope.applyMasterFilter()
  }

2. js code, where i apply the filters

  $scope.applyMasterFilter = function (temp) {
      $scope.temp = localStorage.getItem('sessionIdRecordStatus');

      $scope.filteredDiversionESD = $filter("filter")($scope.MyDiversionESDList, $scope.filterScope)
      $scope.filteredDiversionESD = $filter("filter")($scope.filteredDiversionESD, 
$scope.searchKeywordsText)

    return $scope.onFilterChange()
}

Solution

In case anyone else has the same issue:

I used sessionsStorage. Session instead of Local because i want it to be at the default values each time the website starts.

$scope.RecordStatusSelection = function (recordStatus) {
        sessionStorage.setItem('sessionIdRecordStatus', recordStatus);
        $scope.filterScope.ID_RecordStatus = sessionStorage.sessionIdRecordStatus; 

        return $scope.applyMasterFilter()
  }

$scope.applyMasterFilter = function (temp) {
      $scope.filterScope.ID_RecordStatus = sessionStorage.sessionIdRecordStatus;

      $scope.filteredDiversionESD = $filter("filter")($scope.MyDiversionESDList, $scope.filterScope)
      $scope.filteredDiversionESD = $filter("filter")($scope.filteredDiversionESD, 
$scope.searchKeywordsText)

    return $scope.onFilterChange()
}

It works well, but not too well. The value/option is applied but not shown, i get an empty box instead.

I will edit this answer if i find the full solution.

Answered By - user14669223