Html5 Tutorial - Future Technology

Friday, 28 December 2012

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.

2 comments:

  1. It's Working browser. But in my emulator I can't enter text box values.

    ReplyDelete