Added synclocal options to subscribe to localStorage changes

README.md

@@ -17,8 +17,10 @@ the key to use when storing the value to localHost
 
       namePersist: ko.observable(null, {persist: 'namePersist'}),
 
-      nameDefaultPersist: ko.observable('James', {persist: 'nameDefaultPersis'})
-
+      nameDefaultPersist: ko.observable('James', {persist: 'nameDefaultPersis'}),
+
+      // any changes to localStorage will be propagated back to the variable
+      synclocal : ko.observable('Jamie', {persist: 'nameTestLocal', synclocal : true, pollfreq : 500 })
     }
 
     ko.applyBindings(viewModel);

examples/index.html

@@ -26,8 +26,15 @@
       <input id="default" data-bind="value: nameInitialPersist"></input>
       <output data-bind="value: nameInitialPersist()" ></output>
     </p>
+
+    <p>
+      <span data-bind="text: synclocal"></span>
+    </p>
+
 
     <script>
+      localStorage.clear();
+
       var viewModel = {
         // Default Observable (no initial value, no localStorage)
         name: ko.observable(),
@@ -39,12 +46,22 @@
         namePersist: ko.observable(null, {persist: 'namePersist'}),
 
         // Observable with initial value and localStorage Persistence
-        nameInitialPersist: ko.observable('James', {persist: 'nameDefaultPersis'})
+        nameInitialPersist: ko.observable('James', {persist: 'nameDefaultPersis'}),
 
+        // With local sync
+        synclocal : ko.observable('FAIL: No localStorage changes seen', {persist: 'nameTestLocal', synclocal : true })
       }
 
       ko.applyBindings(viewModel);
 
+
+      // TODO: move to proper test suite
+      var i=0;
+      setInterval(function () {
+          localStorage.setItem('nameTestLocal', '"PASS: change was made '+i+' times"');
+          i+=1;
+      },500);
+
     </script>
   </body>
 </html>

knockout.localStorage.js

@@ -1,7 +1,13 @@
 (function(ko){
+  "use strict";
+
+  var DEFAULT_POLL_FREQUENCY = 1000;
+
   // Wrap ko.observable and ko.observableArray
   var methods = ['observable', 'observableArray'];
 
+  var lastValue = {};
+
   ko.utils.arrayForEach(methods, function(method){
     var saved = ko[method];
 
@@ -19,12 +25,32 @@
 
       // Create observable from saved method
       var observable = saved(initialValue);
+      if (options.synclocal) lastValue[key] = initialValue;
 
       // Subscribe to changes, and save to localStorage
       if(key){
         observable.subscribe(function(newValue){
           localStorage.setItem(key, ko.toJSON(newValue));
+          if (options.synclocal) lastValue[key] = newValue;
         });
+
+        // Be notify of the changes at the localStorage
+        if (options.synclocal) {
+          (function (observable, key) {
+            setInterval(function () {
+              try{
+                var localVal = JSON.parse(localStorage.getItem(key))
+                if (lastValue[key] != localVal) {
+                  observable(localVal);
+                  lastValue[key] = localVal;
+                }
+              }catch(e){
+                console.warn(e);
+              };
+            }, options.pollfreq || DEFAULT_POLL_FREQUENCY);
+          })(observable, key);
+        }
+
       };
 
       return observable;