Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 6 STORING DATA IN THE BROWSERThis document duplicates the input elements from the main example, but without the form andbutton elements. It does, however, have a view model that uses the persistentObservable data item,meaning that changes to the input element values in this document will be reflected in local storage and,equally, that changes in local storage will be reflected in the input elements. I have not supplied defaultvalues for the persistent observable items; if there is no local storage value, then I want the initial valueto default to null, which I achieve by not supplying a second argument to the persistentObservablefunction.All that remains is to modify the main document. For simplicity, I am embedding one documentinside another, but local storage is shared across any documents from the same origin, meaning that thistechnique will work when those documents are within different browser tabs or windows. Listing 6-6shows the modifications to example.html, including embedding the embedded.html document.Listing 6-6. Modifying the Main Example DocumentLocal Storage Examplevar viewModel = {personalDetails: [{name: "name", label: "Name", value: ko.persistentObservable("name")},{name: "city", label: "City", value: ko.persistentObservable("city")},{name: "country", label: "Country",value: ko.persistentObservable("country")}]};$(document).ready(function() {ko.applyBindings(viewModel);$('#buttonDiv input').button().click(function(e) {localStorage.clear();});});Your Details:147www.it-ebooks.info