Wie Sie mit AngularJS nach lokalen Speicheränderungen suchen

Question

Ist es möglich, $ watch zu verwenden, um Änderungen an localStorage zu überwachen?

Ich habe eine Fabrik zu machen Einstellung/immer ein wenig einfache

.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] || '{}'); 
     } 
    } 
}]); 

In meinem Controller habe ich

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

In einem anderen Controller ich auf einem lokalen Speicher hinzugefügt werde. Ich möchte die Änderungen rendern, sobald sich localStorage ändert.

Ich habe ein paar SO-Posts gesehen, die Dinge wie ngStorage verwenden, aber im Idealfall möchte ich das vermeiden.

Ist es möglich? Könnte mir jemand in die richtige Richtung zeigen?

Answer 1

Sie können eine $ watch-Funktion erstellen, die alles zurückgibt, was Sie möchten. Wenn es sich ändert, wird Ihre $ watch ausgeführt.

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

Stellen Sie sicher, dass auf Performance-Tests zu tun. Diese Funktion wird sehr oft aufgerufen.

---

Eine bessere Möglichkeit wäre Ereignisse zu verwenden und nur codes zu aktualisieren, wenn nötig.

-Controller A:

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

Steuerung B:

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