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().

Author: DaveWM

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 <[email protected]>
  * @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

dist/angular-local-storage.min.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

src/angular-local-storage.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) {