Angular: Restore scope from sessionStorage

Question

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

Ponderable

It doesn't seem like sessionStorage setting code gets called in your plnkr – Bioastronautics

@ExplosionPills: you are right, sorry for that. It triggers when i change route but sessionStorage.restorestate is always undefined. – Ponderable

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? – Ingot

@HugoWood well im trying to make it work with what i have from this post: stackoverflow.com/a/16559855 – Ponderable

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. – Ingot

Answer 1

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

Ingot

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. – Ponderable

I get errors on "service.state" references: ReferenceError: service is not defined. Any help? Where do I get the service object? – Yhvh

@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). – Ingot