2015-04-28 13 views
5

È possibile utilizzare $ watch per monitorare le modifiche a localStorage?Come controllare le modifiche alla registrazione locale con AngularJS

ho una fabbrica per fare l'impostazione/ottenere un po 'più semplice

.factory('$localstorage', ['$window', function($window) { 
    return { 
     set: function(key, value) { 
      $window.localStorage[key] = value; 
     }, 

     get: function(key, defaultValue) { 
      return $window.localStorage[key] || defaultValue; 
     }, 

     setObject: function(key, value) { 
      $window.localStorage[key] = JSON.stringify(value); 
     }, 

     getObject: function(key) { 
      return JSON.parse($window.localStorage[key] || '{}'); 
     } 
    } 
}]); 

Nel mio controller ho

.controller('CodesCtrl', function($scope, $localstorage) { 
    $scope.codes = $localstorage.getObject('codes'); 
    ... 

In un altro controller Sto aggiungendo allo storage locale. Mi piacerebbe rendere le modifiche non appena cambia localStorage.

Ho visto alcuni post SO che usano cose come ngStorage ma idealmente vorrei evitarlo.

È possibile? Potrebbe qualcuno indicarmi la giusta direzione?

+0

sovraccarico '' localStorage.getItem' e localStorage.setItem' con i propri metodi. – dandavis

risposta

9

È possibile creare una funzione di orologio $ che restituisca tutto ciò che si desidera. Quando cambia, il tuo orologio $ verrà eseguito.

$scope.$watch(function(){ 
    return $localstorage.getObject('codes'); 
}, function(newCodes, oldCodes){ 
    $scope.codes = newCodes; 
}); 

Assicurarsi di eseguire test delle prestazioni. Questa funzione sarà chiamata molto.


Un modo migliore sarebbe utilizzare gli eventi e aggiornare solo codes quando necessario.

Controller A:

var codes = updateCodesAndStoreInLocalStorage(); // <That part's up to you 
$rootScope.$emit('codesUpdated', codes); 

controller B:

$rootScope.$on('codesUpdated', function(event, codes){ 
    $scope.codes = codes; //Rely on localStorage for "storage" only, not for communication. 
}); 
+0

Si noti che se si utilizza un orologio, il gestore di controllo non viene chiamato immediatamente quando cambia il valore in localStorage. Poiché Angular confronta solo i vecchi valori con nuovi valori (controllo sporco) in un $ digest, il gestore di controllo verrà chiamato solo se si verifica un $ digest. La maggior parte delle azioni avviate dall'utente avvia un $ digest (vale a dire ng-clic), ma se ti aspetti che le cose avvengano automaticamente, devi sapere come vengono chiamati i gestori di watch. – user2943490

+0

I wrapper di Angular per cose come $ localstorage e $ timeout esistono per attivare i cicli digest di $ quando sono stati utilizzati, quindi non dovrebbe essere un problema. – HankScorpio

+0

puoi per favore approfondire la tua seconda strada. non posso farlo chiaramente, voglio anche implementarlo come James –

Problemi correlati