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

Answer 1

There are several options to do this,

1. For smaller data sets you could use the $cookieStore, for data that is under 4k
2. Another option, especially with large data sets, would be to use Local Storage and then retrieve the data on page load/reload.
3. 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.
4. 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