Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

576 CHAPTER 15 Local data with web storage

});

(function () {

this.contactsNamespace = this.contactsNamespace || {};

var ns = this.contactsNamespace;

var currentRecord;

ns.initialize = function () {

$('#btnSave').on('click', ns.save);

ns.display();

};

function retrieveFromStorage() {

var contactsJSON = localStorage.getItem('contacts');

return contactsJSON? JSON.parse(contactsJSON) : [];

}

ns.display = function () {

$('#currentAction').html('Add Contact');

currentRecord = { key: null, contact: {} };

displayCurrentRecord();

var results = retrieveFromStorage();

bindToGrid(results);

};

function bindToGrid(results) {

var html = '';

for (var i = 0; i < results.length; i++) {

var contact = results[i];

html += '<tr><td>' + contact.email + '</td>';

html += '<td>' + contact.firstName + ' ' + contact.lastName + '</td>';

html += '<td><a class="edit" href="javascript:void(0)" data-key='

+ i + '>Edit</a></td></tr>';

}

html = html || '<tr><td colspan="3">No records available</td></tr>';

$('#contacts tbody').html(html);

$('#contacts a.edit').on('click', ns.loadContact);

}

ns.loadContact = function () {

var key = parseInt($(this).attr('data-key'));

var results = retrieveFromStorage();

$('#currentAction').html('Edit Contact');

currentRecord = { key: key, contact: results[key] }

displayCurrentRecord();

};

function displayCurrentRecord() {

var contact = currentRecord.contact;

$('#firstName').val(contact.firstName);

$('#lastName').val(contact.lastName);

$('#email').val(contact.email);

$('#phoneNumber').val(contact.phoneNumber);

}