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

Diglot

what is your use case for saving data on page reload ? – Gumwood

@Gumwood I haven't done anything to save data but I can't do cache storing as it contains lots of data. Just created $http request to get data from api which lost on page refresh. – Diglot

why do you want to save data on page refresh? when would user refresh the page? what kid of data is it? – Gumwood

You can save data to localStorage. – Barbican

But as @Gumwood implies, if the user refreshes the page, it may be because he actually wants to force a reload of the data... – Barbican

If you refresh the page controllers as well as models will be reset. You can use ngCookies to save your data in browser cookies. Initialize the models with the data from cookies at the start of your controller declaration. Then again, this is not a convenient way. – Isobar

@jcaron. localStorage is not useful. As i have many view dependon search functionality. – Diglot

@priya_singh, I'm not sure I understand your issue with localStorage, though it's difficult to understand your requirements without a better description of your app and what you want to save or not. – Barbican

@Gumwood I just want to maintain the api data which is coming after search functionalty. Is local storage help me to maintain my json data??? – Diglot

@Diglot yes, you can do that usig localStorage, but i am still not sure what the use case is and why would you want to do that? – Gumwood

I just uploaded the images, Please see and try to understand my scenario. As I having sidebar whose data is dependent on that search functionality. So is localstorage is helful for me??. – Diglot

What would be most useful for you is probably just to maintain state (the details of the current search), rather than the actual data, and reload that data based on the current search. Ideally, you want to save that in the URL (probably in the fragment identifier), so that the URL can be bookmarked or shared, re-opened when you quit/restart your browser, etc. – Barbican

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');

});

Truism

Its showing error: " sessionStorage.get is not a function " – Diglot

sorry it should be storageService.get('key'). i updated my answer. thanks for correcting me – Aquinas

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.

Harcourt

Answer 3

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".

Barbican

Answer 4

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
})

Samothrace

Answer 5

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.

Time