Html5 local storage example

Title : Html5 local storage example - a small tutorial.

User can enter the contact details , store the contact details in a table , can modify them, can retrive them and can remove them when he wanted.
Html5 comes with a new feature local storage that can add an item with key value pair and can retrive,modify,delete them when he wants.
Here is the code for the above example.

<!
doctype html>

<

html>

<

head>

<meta charset="utf-8" />

<title>Contacts</title>

<style>

a { color: #0068D2; cursor: pointer; }

a:link, a:visited { text-decoration: none; color: #0068D2; }

a:hover, a:active { text-decoration: underline; color: #0068D2; }

body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", sans-serif; }

#contacts-table { border-collapse: collapse; }

#contacts-table, #contacts-table th, #contacts-table td { padding: 8px 16px; text-align: left; border: 0px solid #B9BABE; }

#contacts-table th { font-weight: bold; font-size: 14px; color: #29344B; }

#contacts-table td { color: #000; }

#contacts-table tr:nth-child(2n) { background: #E8EDFF; }

#contacts-form { padding: 10px; }

.text input, .button input { padding: 5px; margin: 0; border: 1px solid #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }

#contacts-form .item { margin: 3px 0; }

#contacts-form label, #contacts-form .field { display: inline-block; color: #0C0B07; }

#contacts-form label { width: 110px; font-weight: bold; text-align: right; color: #666; }

#contacts-form .text input { width: 176px; padding: 3px; }

#contacts-form .button { display: inline-block; }

#contacts-form .button-wrapper { padding-left: 113px; }

.button input { padding: 4px 8px; color: #343434; background-color: #fdfdfd; background: -moz-linear-gradient(#fdfdfd, #e1e1e1); background: -webkit-gradient(linear, 0 0, 0 100%, from(#fdfdfd), to(#e1e1e1)); }

.button-default input { font-weight: bold; color: #fff; background-color: #7ca0c7; background: -moz-linear-gradient(#acc6e1, #7ca0c7); background: -webkit-gradient(linear, 0 0, 0 100%, from(#acc6e1), to(#7ca0c7)); border-color: #5b80b2; }

</style>

</

head>

<

body>

<h1>Contacts</h1>

<table id="contacts-table">

<tr id="contacts-head">

<th>ID</th>

<th>First name</th>

<th>Last name</th>

<th>Email</th>

<th>Actions</th>

</tr>

</table>

<form id="contacts-form">

<div class="item text">

<label>First name:</label>

<div class="field"><input type="text" name="first_name" /></div>

</div>

<div class="item text">

<label>Last name:</label>

<div class="field"><input type="text" name="last_name" /></div>

</div>

<div class="item text">

<label>Email:</label>

<div class="field"><input type="text" name="email" /></div>

</div>

<div class="button-wrapper">

<div class="item button">

<div class="field"><input type="button" id="contacts-op-discard" value="Discard" /></div>

</div>

<div class="item button button-default">

<div class="field"><input type="submit" id="contacts-op-save" value="Save" /></div>

</div>

</div>

<input type="hidden" name="id_entry" value="0" />

</form>

<script>

var Contacts = {

index: window.localStorage.getItem(

"Contacts:index"),

$table: document.getElementById(

"contacts-table"),

$form: document.getElementById(

"contacts-form"),

$button_save: document.getElementById(

"contacts-op-save"),

$button_discard: document.getElementById(

"contacts-op-discard"),

init:

function() {

// initialize storage index

if (!Contacts.index) {

window.localStorage.setItem(

"Contacts:index", Contacts.index = 1);

}

// initialize form

Contacts.$form.reset();

Contacts.$button_discard.addEventListener(

"click", function(event) {

Contacts.$form.reset();

Contacts.$form.id_entry.value = 0;

},

true);

Contacts.$form.addEventListener(

"submit", function(event) {

var entry = {

id: parseInt(

this.id_entry.value),

first_name:

this.first_name.value,

last_name:

this.last_name.value,

email:

this.email.value

};

if (entry.id == 0) { // add

Contacts.storeAdd(entry);

Contacts.tableAdd(entry);

}

else { // edit

Contacts.storeEdit(entry);

Contacts.tableEdit(entry);

}

this.reset();

this.id_entry.value = 0;

event.preventDefault();

},

true);

// initialize table

if (window.localStorage.length - 1) {

var contacts_list = [], i, key;

for (i = 0; i < window.localStorage.length; i++) {

key = window.localStorage.key(i);

if (/Contacts:\d+/.test(key)) {

contacts_list.push(JSON.parse(window.localStorage.getItem(key)));

}

}

if (contacts_list.length) {

contacts_list

.sort(

function(a, b) {

return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);

})

.forEach(Contacts.tableAdd);

}

}

Contacts.$table.addEventListener(

"click", function(event) {

var op = event.target.getAttribute("data-op");

if (/edit|remove/.test(op)) {

var entry = JSON.parse(window.localStorage.getItem("Contacts:"+ event.target.getAttribute("data-id")));

if (op == "edit") {

Contacts.$form.first_name.value = entry.first_name;

Contacts.$form.last_name.value = entry.last_name;

Contacts.$form.email.value = entry.email;

Contacts.$form.id_entry.value = entry.id;

}

else if (op == "remove") {

if (confirm('Are you sure you want to remove "'+ entry.first_name +' '+ entry.last_name +'" from your contacts?')) {

Contacts.storeRemove(entry);

Contacts.tableRemove(entry);

}

}

event.preventDefault();

}

},

true);

},

storeAdd:

function(entry) {

entry.id = Contacts.index;

window.localStorage.setItem(

"Contacts:index", ++Contacts.index);

window.localStorage.setItem(

"Contacts:"+ entry.id, JSON.stringify(entry));

},

storeEdit:

function(entry) {

window.localStorage.setItem(

"Contacts:"+ entry.id, JSON.stringify(entry));

},

storeRemove:

function(entry) {

window.localStorage.removeItem(

"Contacts:"+ entry.id);

},

tableAdd:

function(entry) {

var $tr = document.createElement("tr"), $td, key;

for (key in entry) {

if (entry.hasOwnProperty(key)) {

$td = document.createElement(

"td");

$td.appendChild(document.createTextNode(entry[key]));

$tr.appendChild($td);

}

}

$td = document.createElement(

"td");

$td.innerHTML =

'<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';

$tr.appendChild($td);

$tr.setAttribute(

"id", "entry-"+ entry.id);

Contacts.$table.appendChild($tr);

},

tableEdit:

function(entry) {

var $tr = document.getElementById("entry-"+ entry.id), $td, key;

$tr.innerHTML =

"";

for (key in entry) {

if (entry.hasOwnProperty(key)) {

$td = document.createElement(

"td");

$td.appendChild(document.createTextNode(entry[key]));

$tr.appendChild($td);

}

}

$td = document.createElement(

"td");

$td.innerHTML =

'<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';

$tr.appendChild($td);

},

tableRemove:

function(entry) {

Contacts.$table.removeChild(document.getElementById(

"entry-"+ entry.id));

}

};

Contacts.init();

</script>

</

body></
html>
I  willl explain the line by line code with in this week so, please follow this blog.