9

I am trying to retrieve my search and filter data from sessionStorage when the page refreshes.

sessionStorage.restorestate returns undefined, does anyone know why?

app.run(function($rootScope) {
    $rootScope.$on("$routeChangeStart", function(event, next, current) {
      if (sessionStorage.restorestate == "true") {
        $rootScope.$broadcast('restorestate'); //let everything know we need to restore state
        sessionStorage.restorestate = false;
      }
    });

    //let everthing know that we need to save state now.
    window.onbeforeunload = function(event) {
      $rootScope.$broadcast('savestate');
    };
  });

Plunkr: http://plnkr.co/edit/oX4zygwB0bDpIcmGFgYr?p=preview

08Dc91wk
  • 4,254
  • 8
  • 34
  • 67
  • It doesn't seem like `sessionStorage` setting code gets called in your plnkr – Explosion Pills Aug 21 '14 at 13:57
  • @ExplosionPills: you are right, sorry for that. It triggers when i change route but sessionStorage.restorestate is always undefined. –  Aug 21 '14 at 14:07
  • The plunker doesn't use `ngRoute` so there cannot be any route changes. Plus I can't see any line of code that sets `sessionStorage.restorestate` to anything so its never going to be `"true"`. Is there some piece of code missing? – Hugo Wood Aug 21 '14 at 14:14
  • @HugoWood well im trying to make it work with what i have from this post: http://stackoverflow.com/a/16559855 –  Aug 21 '14 at 14:37
  • 2
    People who upvoted that answer probably didn't test it, because it doesn't work at all, and it's far from being the best answer to the question. The OP only wants to preserve data when changing views. That doesn't require anything more than putting the data into a service. *You* want to preserve when refreshing. Completely different. – Hugo Wood Aug 21 '14 at 15:43

1 Answers1

13

When you refresh the page in an Angular app, it is like completely rebooting the application. So to restore from the session storage, just do it when the service factory executes.

app.factory('CustomerSearchService', ['$rootScope',
    function($rootScope) {
        ...
        function restoreState() {
            service.state = angular.fromJson(sessionStorage.CustomerSearchService);
        }
        if (sessionStorage.CustomerSearchService) restoreState();
        ...
    }
]);

The saving part was already correct.

app.factory('CustomerSearchService', ['$rootScope',
    function($rootScope) {
        ...
        function saveState() {
            sessionStorage.CustomerSearchService = angular.toJson(service.state);
        }
        $rootScope.$on("savestate", saveState);
        ...
    }
]);

app.run(function($rootScope) {
    window.onbeforeunload = function(event) {
      $rootScope.$broadcast('savestate');
    };
});

DEMO

Hugo Wood
  • 2,140
  • 15
  • 19
  • Ty for this answere it works like a charm, will try to make it dynamic so i don't need a new service every time i want this. –  Aug 22 '14 at 07:37
  • I get errors on "service.state" references: `ReferenceError: service is not defined`. Any help? Where do I get the `service` object? – Abhishek Saini Oct 18 '16 at 11:12
  • 1
    @AbhishekSaini `service` is the object returned by the factory. Have a look at the demo linked in the answer (which is forked from the one in the question). – Hugo Wood Oct 18 '16 at 15:17