How to persist data and model in angular JS

Question

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 comes 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

Answer 1

As comments 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.