How to bind values from local Storage data?

Question

i am trying to post a list via localStorage by using LocalStorage.setItem(key,value); and then i received that data by LocalStorage.getItem(key); My question is how to bind the value of localStorage Data.

<div ng-controller="ContactController">
<form border="2">
<label>
    Name</label>
<input type="text" name="name" ng-model="newcontact.name" />
<label>
    Email</label>
<input type="text" name="email" ng-model="newcontact.email" />
<label>
    Phone</label>
<input type="text" name="phone" ng-model="newcontact.phone" />
<br />
<input type="hidden" ng-model="newcontact.id" />
<input type="button" value="Save" ng-click="saveContact()" />
</form>
<table border="3">
    <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
                Email
            </th>
            <th>
                Phone
            </th>
            <th>
                Action
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="contact in contacts">
            <td>
                {{ contact.name }}
            </td>
            <td>
                {{ contact.email }}
            </td>
            <td>
                {{ contact.phone }}
            </td>
            <td>
                <a href="#" ng-click="edit(contact.id)">edit</a> | <a href="#" ng-click="delete(contact.id)">
                    delete</a>
            </td>
        </tr>
    </tbody>
</table>
<div>
    <input type="button" ng-click="LoadProductDetails()" value="click" />
</div>
<table border="3">
    <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
                Email
            </th>
            <th>
                Phone
            </th>
            <th>
                id
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="contact in datalist track by $index">
            <td>
                {{ contact.name }}
            </td>
            <td>
                {{ contact.email }}
            </td>
            <td>
                {{contact.phone }}
            </td>
            <td>
                {{contact.id }}
            </td>

        </tr>
    </tbody>
</table>

From the list i get those binding data..?How can i bind the data by using javaScript?

Answer 1

Knockout.Localstorage

(function(ko){
// Wrap ko.observable and ko.observableArray
    var methods = ['observable', 'observableArray'];

    ko.utils.arrayForEach(methods, function(method){
        var saved = ko[method];

    ko[method] = function(initialValue, options){
        options = options || {};

    var key = options.persist;

     // Load existing value if set
     if(key && localStorage.hasOwnProperty(key)){
        try{
             initialValue = JSON.parse(localStorage.getItem(key))
           }catch(e){};
     }

     // Create observable from saved method
     var observable = saved(initialValue);

     // Subscribe to changes, and save to localStorage
     if(key){
        observable.subscribe(function(newValue){
        localStorage.setItem(key, ko.toJSON(newValue));
     });
   };

   return observable;
  }
  })
 })(ko);

Here is the sample using amplifyjs
Here is the sample in knockout.localstorage

If you want to use angular js, my choice is ngStorage here is Demo