8

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 search Page

Data after search data after search

Data after reload after reload

Mistalis
  • 17,793
  • 13
  • 73
  • 97
priya_singh
  • 2,478
  • 1
  • 14
  • 32
  • what is your use case for saving data on page reload ? – gaurav5430 Dec 21 '16 at 07:21
  • @gaurav5430 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. – priya_singh Dec 21 '16 at 07:23
  • why do you want to save data on page refresh? when would user refresh the page? what kid of data is it? – gaurav5430 Dec 21 '16 at 07:24
  • You can save data to `localStorage`. – jcaron Dec 21 '16 at 07:24
  • But as @gaurav5430 implies, if the user refreshes the page, it may be because he actually wants to force a reload of the data... – jcaron Dec 21 '16 at 07:25
  • 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. – Bopsi Dec 21 '16 at 07:25
  • @jcaron. localStorage is not useful. As i have many view dependon search functionality. – priya_singh Dec 21 '16 at 07:25
  • @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. – jcaron Dec 21 '16 at 07:26
  • @gaurav5430 I just want to maintain the api data which is coming after search functionalty. Is local storage help me to maintain my json data??? – priya_singh Dec 21 '16 at 07:28
  • @priya_singh 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? – gaurav5430 Dec 21 '16 at 07:29
  • 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??. – priya_singh Dec 21 '16 at 07:35
  • 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. – jcaron Dec 21 '16 at 08:42

5 Answers5

3

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

});
Debug Diva
  • 26,058
  • 13
  • 70
  • 123
1

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.
Atul Sharma
  • 9,397
  • 10
  • 38
  • 65
1

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

jcaron
  • 17,302
  • 6
  • 32
  • 46
0

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
})
Mr_Perfect
  • 8,254
  • 11
  • 35
  • 62
0

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.

deek
  • 1,085
  • 1
  • 9
  • 27