All data is gone on page reload. Is there any way to avoid that?

Question

I have developed one dashboard application in angular js which is having search functionality and multiple views with lots of different data coming from that search functionality.

Its single page application. So I am facing issue on page reload all data is gone and it shows view with blank data.

Is there any way to solve this issue or any language which help me to create single page application and maintain same data on page reload??

Any suggestion will be appreciated.

Search Page

Data after search

Data after reload

Answer 1

You can use sessionStorage to set & get the data.

Step 1 :

Create a factory service that will save and return the saved session data based on the key.

app.factory('storageService', ['$rootScope', function($rootScope) {

    return {
        get: function(key) {
            return sessionStorage.getItem(key);
        },
        save: function(key, data) {
            sessionStorage.setItem(key, data);
        }
    };
}]);

Step 2 :

Inject the storageService dependency in the controller to set and get the data from the session storage.

app.controller('myCtrl',['storageService',function(storageService) {

  // Save session data to storageService on successfull response from $http service.
  storageService.save('key', 'value');

  // Get saved session data from storageService on page reload
  var sessionData = storageService.get('key');

});

Answer 2

You need to save data before changing the state of application / moving to another page,route.

So, either save that data using

• Angular services (Save data, change route, come back check the data in service and reassign variables from service.)
• Local-storage to save data. (Save data, change route, come back check the data in service and reassign variables from service.)
• Rootscope. Set data in rootscope and move .. after coming back check the variables and reassign.