Passing Data Between Pages in AngularJS + Page Refresh

Question

I am trying to pass data between pages in the checkout process of an app but it's not working the way it should. I have done some reading and most people recommend using a service, but the only issue is that when the page is refreshed (user clicks refresh or comes back at a later time) all the data from the service disappears. This makes sense since the data in a service is not meant to be persistent but it is causing a problem.

So the question is: how can I pass data between pages in angularJS and still keep the data that was passed after a page refresh?

Here is my code so far (with my attempt at using query strings):

.service('checkoutService', 
          function checkoutService($location, Address, $routeParams, TicketGroup) {
    var ticket_quantity = 0;
    var ticket_group = {};
    var selected_address = {};

    this.loadInformation = function() {
        if(!ticket_quantity && $routeParams.ticket_quantity)
            ticket_quantity = $routeParams.ticket_quantity;
        if(!ticket_group && $routeParams.ticket_group_id)
            ticket_group = TicketGroup.get({id: $routeParams.ticket_group_id});
        if(!selected_address && $routeParams.address_id)
            selected_address = Address.get({id: $routeParams.address_id});
    }

    this.setTicketQuantity = function(quantity) {
        ticket_quantity = quantity;
        $location.path().search({ticket_quantity: quantity});
    }
    this.getTicketQuantity = function() {
        return ticket_quantity;
    }

    this.setTicketGroup = function(object) {
        ticket_group = object;
        $routeParams.ticket_group = object.id;
    }
    this.getTicketGroup  = function() {
        return ticket_group;
    }

    this.setSelectedAddress = function(object) {
        selected_address = object;
        $routeParams.address_id = object.id;
    }
    this.getSelectedAddress = function() {
        return selected_address;
    }
});

Or use ngCookie? Or have the data stored on the server and reload it on refresh. — David Sung Lee, Sep 17 '14 at 22:11

score 15 · Accepted Answer · edited May 23 '17 at 11:53

There are several options to do this,

For smaller data sets you could use the $cookieStore, for data that is under 4k
Another option, especially with large data sets, would be to use Local Storage and then retrieve the data on page load/reload.
if it is only a very small amount of data, or data that is used through out multiple page you could use $rootscope, but this is not the best option as it just like polluting the global name space.
The last option, depending on how the data is retrieved, a service could be implemented, that is basically a singleton that can be passed to various angular scope.

Note: only the first two are persistent.

In your case I think that using local storage or the cookiestore will be you best options. You are trying to use a service, which would be appropriate if you did not want it to be persistent (leaving the page or a page refresh). Services are singletons that being managed by angular, when injected you will get a reference to the same object in each injection. However, when returning to the page this singleton will need to be re initialized, thus losing all previous data. The only way to make make a service persistent would be to load the data from a database, a local file, or noSQL from elsewhere. However, I do not think this is really what you are after.

If you are interested in pursuing the local storage implementation then look into these modules angular-local-storage, ngStorage or this answer

If you want to use the cookiestore look into this answer

Having a service that utilizes $cookieStore is perfect for these types of things. That way you can easily access the cookie values from anywhere in your application. — robert.bo.roth, Oct 14 '14 at 18:47
@robert.bo.roth that would be an interesting solution, and might be very useful for a lot of people. — Jared Reeves, Oct 14 '14 at 19:02

ABOS · Answer 2 · 2014-09-17T22:19:44.340

0

You can use Session/LocalStorage. Or a browser db like pounchdb. Seesion storage: store session data; LocalStorage: store data not just session scope pounchdb : offline db

edited Sep 17 '14 at 22:19

answered Sep 17 '14 at 22:10

ABOS

3,723
3
17
23

2

you should elaborate a little bit more your answer – pedrommuller Sep 17 '14 at 22:13

Passing Data Between Pages in AngularJS + Page Refresh

2 Answers2

Linked