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

Get data on page refresh, that is something like,

$rootScope.on('onStateChangeStart', function(){
  // here make a call to the source
  $http(); // request and try to get data
})

Answer 3

use localStorage or save data to your server for users in a database temporarily and get it back with an API call(localstorage has a 10MB) limit.

You can have your code try to retrieve localstorage values first if they exist.

Answer 4

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.

Answer 5

Your problem is not saving the data, but saving the state in your URL. As it is, you only save the "step", but no other information, so when you reload the page (refresh, or close/re-open browser, or open bookmark, or share...) you don't have all the information needed to restore the full page.

Add the relevant bits to the URL (as you have a single page app, probably in the fragment identifier). Use that information to load the data, rather than relying on other mechanisms to pass data between the "pages".