I have one search page where user enters search criteria and search results will be displayed and when the user navigates to another page and es back to this page the results should be persist.

Each submodule has it's own app.js and controller and how to persist data across pages. I am not pretty sure how to go with $localStorage

I have one search page where user enters search criteria and search results will be displayed and when the user navigates to another page and es back to this page the results should be persist.

Each submodule has it's own app.js and controller and how to persist data across pages. I am not pretty sure how to go with $localStorage

• javascript
• angularjs
• persist
• angular-local-storage
• ng-storage

Share Improve this question Follow asked Oct 21, 2015 at 17:37 TechJumpTechJump 7911 silver badge1414 bronze badges 2

• 4 You can use a service or factory to persist data between views. – lintmouse Commented Oct 21, 2015 at 17:39
• I am novice, can it possible to provide more elaborate answer? – TechJump Commented Oct 21, 2015 at 17:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

As ments have said, services and factories are both capable of this. I generally handle this using localStorageService like you have suggested. First, load the local storage module in your index.html AFTER angularJS, but BEFORE your app.js.

<script src="/angular/angular.js"></script>
<script src="/lib/angular-local-storage.js"></script>
<script src="/app.js"></script>

Next, include LocalStorageModule as a dependency in your main module's declaration.

angular.module('test',['LocalStorageModule']);

Now, configure locaStorageService in the relevant module's declaration file using:

localStorageServiceProvider
  .setStorageType('localStorage');

All together, your app.js file should resemble this:

angular.module('test',['LocalStorageModule']);

  config.$inject = ['localStorageServiceProvider'];
  function config (localStorageServiceProvider) {
  localStorageServiceProvider
      .setStorageType('localStorage');
  }

  angular
  .module('test')
  .config(['localStorageServiceProvider', config]);
  })();

I minify my scripts before they go into production, so I use dependency injection, specifically with the $inject syntax.

An example controller that loads your query from a cookie on page load, and saves your query to a cookie when you execute a search ($scope.doSearch):

(function () {

angular.module("pstat")
       .controller("homeCtrl", homeCtrl);

  homeCtrl.$inject = ['$log', 'dataService', 'localStorageService', '$http'];
   function homeCtrl ($log, dataService, localStorageService, $http) { {
     if (localStorageService.get("query")) { //Returns null for missing 'query' cookie
        //Or store the results directly if they aren't too large
        //Do something with your saved query on page load, probably get data
        //Example:
        dataService.getData(query)
        .success( function (data) {})
        .error( function (err) {})
     }
     $scope.doSearch = function (query) {
       vm.token = localStorageService.set("query", query);
       //Then actually do your search
     }
   })
}()

As long as your root URL does not change, you can access this cookie with either your query or your results on any page through localStorageService. If you need more details on anything just let me know.

Note if you want to do this automatically on page load, you need to wrap your controller in an Immediately Invoked Function Expression. Good luck! AngularJS has a fairly high learning curve, but is one of the most powerful front end software suites available.