Simple client storage for observables

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/amplifyjs/1.1.0/amplify.min.js"></script>
SP:
<input data-bind="value: someProperty" />
<br/>SP2:
<input data-bind="value: someProperty2" />
<br/>
<span data-bind="text: someProperty"> </span>, <span data-bind="text: someProperty2"> </span>

JavaScript

function trackChange(observable, key){
      var store = amplify.store.localStorage;

            //initialize from stored value, or if no value is stored yet, use the current value
            var value = store(key) || observable();

            //track the changes
            observable.subscribe(function (newValue) {
                store(key, newValue || null);
                if (ko.toJSON(observable()) != ko.toJSON(newValue)) observable(newValue);
            });

            observable(value); //restore current value
}

ko.trackChanges = function (vm, prefix) {
    if (typeof (prefix) === 'undefined') {
        prefix = '';
    }

    for (var n in vm) {
                
        var observable = vm[n];
        var key = prefix + n;

        console.log(n);
        console.log(key);
        
        if (ko.isObservable(observable)) {

          trackChange(observable, key);
        }
    }
}



//then, if we want to have observables restored from local storage (and future changes tracked)
//we call track changes like this:

var viewModel = {
    someProperty: ko.observable(),
    someProperty2: ko.observable()
};

ko.trackChanges(viewModel, 'vm-');
ko.applyBindings(viewModel);