Passaggio di dati tra le pagine in AngularJS + Aggiornamento pagina

Question

Sto cercando di passare i dati tra le pagine nel processo di checkout di un'app ma non funziona come dovrebbe. Ho fatto alcune letture e la maggior parte delle persone consiglia di utilizzare un servizio, ma l'unico problema è che quando la pagina viene aggiornata (l'utente fa clic su Aggiorna o ritorna in un secondo momento) tutti i dati del servizio scompaiono. Questo ha senso dal momento che i dati di un servizio non sono pensati per essere persistenti, ma sta causando un problema.

Quindi la domanda è: come posso passare i dati tra le pagine in angularJS e mantenere ancora i dati che sono stati passati dopo l'aggiornamento di una pagina?

Ecco il mio codice finora (con il mio tentativo di utilizzare stringhe di query):

.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

Ci sono diverse opzioni per fare questo,

1. Per i dati più piccola imposta è possibile utilizzare il $cookieStore, per i dati che si trova sotto 4k
2. Un'altra opzione, in particolare con set di dati di grandi dimensioni, sarebbe quella di utilizzare Local Storage e quindi recuperare i dati sul caricamento della pagina/ricaricare.
3. se è solo una piccola quantità di dati, o dati che vengono utilizzati attraverso più pagine, è possibile utilizzare $ rootscope, ma questa non è l'opzione migliore in quanto equivale a inquinare lo spazio dei nomi globale.
4. L'ultima opzione, a seconda di come vengono recuperati i dati, può essere implementata a service, che è fondamentalmente un singleton che può essere passato a vari ambiti angolari.

Nota: solo i primi due sono persistenti.

Nel tuo caso penso che l'utilizzo di memoria locale o cookiestore sarà voi migliori opzioni. Stai tentando di utilizzare un servizio, che sarebbe appropriato se non volessi che fosse persistente (lasciando la pagina o un aggiornamento della pagina). I servizi sono singoletti che essendo gestiti da angolari, quando iniettati otterrete un riferimento allo stesso oggetto in ogni iniezione. Tuttavia, quando si ritorna alla pagina, questo singleton dovrà essere inizializzato nuovamente, perdendo così tutti i dati precedenti. L'unico modo per rendere persistente un servizio è quello di caricare i dati da un database, un file locale o noSQL da un'altra posizione. Tuttavia, non penso che questo sia davvero ciò che stai cercando.

Se siete interessati a perseguire l'attuazione di memorizzazione locale, allora guardare in questi moduli angular-local-storage, ngStorage o questo answer

Se si desidera utilizzare il cookiestore guardare in questo answer

Answer 2

È possibile utilizzare Session/LocalStorage. O un browser db come pounchdb. Archiviazione Seesion: memorizza i dati della sessione; LocalStorage: archiviare i dati non solo ambito sessione pounchdb: offline db