3

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

TechJump
  • 79
  • 1
  • 12

1 Answers1

4

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.

awimley
  • 692
  • 1
  • 9
  • 29
  • Thanks for you answer Where exactly should be declared the below, localStorageServiceProvider.setStorageType('localStorage'); Does it in app.js run? Does it use html5 localstorage or ngStorage module and not just data/query, I also need to persist the parameters and display back the filter fields on UI. Can this be achieved with this? – TechJump Oct 21 '15 at 18:13
  • Yes, it is in app.js. It uses the localStorage module. And yes you can change the UI with this, because in AngularJS changes to $scope are closely tied to UI changes. You just need to model it correctly. – awimley Oct 21 '15 at 18:18
  • I am getting , Uncaught ReferenceError: localStorageServiceProvider is not defined, the changes I did are like below angular.module('test',[] ).run( localStorageServiceProvider.setStorageType('localStorage'); ) – TechJump Oct 22 '15 at 01:29
  • 1
    You need to include it in your module's dependencies and in your index.html file. I'll update my answer to show the full configuration. – awimley Oct 22 '15 at 12:56