Listen for change event for bound values

When you call localStorageService.bind, an event listener is now registered that is fired when the value of the local storage key changes, which updates the value and calls scope.$apply().
grevory · Nov 6, 2014 · 9aed911 · 9aed911
1 parent 3c5e2ec
commit 9aed911
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 9 deletions.
diff --git a/dist/angular-local-storage.js b/dist/angular-local-storage.js
@@ -1,6 +1,6 @@
 /**
  * An Angular module that gives you access to the browsers local storage
- * @version v0.1.5 - 2014-11-04
+ * @version v0.1.5 - 2014-11-06
  * @link https://github.com/grevory/angular-local-storage
  * @author grevory <greg@gregpike.ca>
  * @license MIT License, http://www.opensource.org/licenses/MIT
@@ -181,7 +181,6 @@ angularLocalStorage.provider('localStorageService', function() {
     // Directly get a value from local storage
     // Example use: localStorageService.get('library'); // returns 'angular'
     var getFromLocalStorage = function (key) {
-
       if (!browserSupportsLocalStorage || self.storageType === 'cookie') {
         if (!browserSupportsLocalStorage) {
           $rootScope.$broadcast('LocalStorageModule.notification.warning','LOCAL_STORAGE_NOT_SUPPORTED');
@@ -411,9 +410,23 @@ angularLocalStorage.provider('localStorageService', function() {
 
       $parse(key).assign(scope, value);
 
-      return scope.$watch(key, function(newVal) {
+      var onKeyUpdated = function (event) {
+        if (event.key == deriveQualifiedKey(key)) {
+          scope[key] = getFromLocalStorage(key);
+          scope.$apply();
+        }
+      };
+
+      $window.addEventListener("storage", onKeyUpdated, false);
+
+      var unregisterWatch = scope.$watch(key, function (newVal) {
         addToLocalStorage(lsKey, newVal);
       }, isObject(scope[key]));
+
+      return function () {
+        unregisterWatch();
+        $window.removeEventListener("storage", onKeyUpdated);
+      };
     };
 
     // Return localStorageService.length

diff --git a/dist/angular-local-storage.min.js b/dist/angular-local-storage.min.js
diff --git a/src/angular-local-storage.js b/src/angular-local-storage.js
@@ -154,7 +154,6 @@ angularLocalStorage.provider('localStorageService', function() {
     // Directly get a value from local storage
     // Example use: localStorageService.get('library'); // returns 'angular'
     var getFromLocalStorage = function (key) {
-
       if (!browserSupportsLocalStorage || self.storageType === 'cookie') {
         if (!browserSupportsLocalStorage) {
           $rootScope.$broadcast('LocalStorageModule.notification.warning','LOCAL_STORAGE_NOT_SUPPORTED');
@@ -384,9 +383,23 @@ angularLocalStorage.provider('localStorageService', function() {
 
       $parse(key).assign(scope, value);
 
-      return scope.$watch(key, function(newVal) {
+      var onKeyUpdated = function (event) {
+        if (event.key == deriveQualifiedKey(key)) {
+          scope[key] = getFromLocalStorage(key);
+          scope.$apply();
+        }
+      };
+
+      $window.addEventListener("storage", onKeyUpdated, false);
+
+      var unregisterWatch = scope.$watch(key, function (newVal) {
         addToLocalStorage(lsKey, newVal);
       }, isObject(scope[key]));
+
+      return function () {
+        unregisterWatch();
+        $window.removeEventListener("storage", onKeyUpdated);
+      };
     };
 
     // Return localStorageService.length

diff --git a/test/spec/localStorageSpec.js b/test/spec/localStorageSpec.js
@@ -117,9 +117,16 @@ describe('localStorageService', function() {
   }
 
   beforeEach(module('LocalStorageModule', function($provide) {
-
+    spyOn(window, 'addEventListener').andCallThrough();
+    spyOn(window, 'removeEventListener').andCallThrough();
     $provide.value('$window', {
-      localStorage: localStorageMock()
+      localStorage: localStorageMock(),
+      addEventListener: function () {
+        window.addEventListener.apply(window, arguments);
+      },
+      removeEventListener : function (){
+        window.removeEventListener.apply(window, arguments);
+      }
     });
 
   }));
@@ -286,6 +293,7 @@ describe('localStorageService', function() {
     $rootScope.$digest();
 
     expect($rootScope.property).toEqual(localStorageService.get('property'));
+    expect(window.addEventListener).toHaveBeenCalled();
   }));
 
   it('should be able to unbind from scope variable', inject(function($rootScope, localStorageService) {
@@ -303,6 +311,7 @@ describe('localStorageService', function() {
     $rootScope.$digest();
 
     expect($rootScope.property).not.toEqual(localStorageService.get('property'));
+    expect(window.removeEventListener).toHaveBeenCalled();
   }));
 
   it('should be able to bind to properties of objects', inject(function($rootScope, localStorageService) {
@@ -318,6 +327,26 @@ describe('localStorageService', function() {
     expect($rootScope.obj.property).toEqual(localStorageService.get('obj.property'));
   }));
 
+  it('should update a bound value when local storage is updated', inject(function ($rootScope, localStorageService, $window){
+    localStorageService.bind($rootScope, 'test');
+    $rootScope.$digest();
+
+    // set the value in local storage mock to a value, then emit a changed event
+    var testValue = 'test';
+    $window.localStorage['ls.test'] = testValue;
+    var evt = document.createEvent('CustomEvent');
+    evt.key = 'ls.test';
+    evt.newValue = 'test value';
+    evt.initCustomEvent('storage', true, true, {
+      key: 'ls.test',
+      newValue: testValue
+    });
+    window.dispatchEvent(evt);
+    $rootScope.$digest();
+
+    expect($rootScope.test).toEqual(testValue);
+  }));
+
   it('should be able to bind to scope using different key', inject(function($rootScope, localStorageService) {
 
     localStorageService.set('lsProperty', 'oldValue');
@@ -329,6 +358,7 @@ describe('localStorageService', function() {
     $rootScope.$digest();
 
     expect($rootScope.property).toEqual(localStorageService.get('lsProperty'));
+    expect(window.addEventListener).toHaveBeenCalled();
   }));
 
   it('should $watch with deep comparison only for objects', inject(function($rootScope, localStorageService) {