In HTML5, localStorage data is not passed with every server request, but is used
only when requested. It is possible to store large amounts of data without affecting
the website's performance.
The data is stored in different areas for different websites, and a website can only
access data stored by itself. The localStorage object stores the data with no
time limit. Therefore, unless localStorage on the client is cleared, it will
remain on the machine. Both localStorage and sessionStorage have the same methods
and behavior. localStorage is an object of the DOM window.
The localStorage scheme stores all data as strings. Therefore, if we want to store
an object, we need to serialize it to JSON, and when reading it back out, deserialize
it back to a javascript object. Not all browsers fully implement localStorage.
For this demo, I used Chrome.
So, for example, to store a class:
<html>
<head>
<script type="text/javascript">
function Note(id,subject, message, date)
{
this.id = id;
this.subject=subject;
this.message=message;
this.date=date;
};
function store( key, value)
{
window.localStorage.setItem(key,JSON.stringify(value));
}
function get (key)
{
return JSON.parse(localStorage.getItem(key));
}
function addItem()
{
var key = 1;
var subject ="Test Subject";
var mess = "This is the message";
var date = "2/10/2012";
x=new Note( key, subject, mess,date);
store(key,x);
}
function demo()
{
addItem();
var note = get(1);
alert(note.id +": " + note.subject + ": " +note.message + ":
" + note.date);
}
</script>
</head>
<body onload="demo();">
</body>
</html>
In the sample application, I have a number of helper functions:
The "Note" object:
function Note(id,subject, message, date)
{
this.id = id;
this.subject=subject;
this.message=message;
this.date=date;
};
A populate() funtion - for demo data:
function populate()
{
clear();
var x;
for(var key=1;key<10;key++)
{
x=new Note( key,"Test subject "+key, "this is the message",
"2/6/12");
store(key,x);
}
list();
}
localStorage helper functions:
function store( key, value)
{
window.localStorage.setItem(key,JSON.stringify(value));
}
function remove (key)
{
localStorage.removeItem(key);
list();
}
function clear()
{
localStorage.clear();
}
function get (key)
{
return JSON.parse(localStorage.getItem(key));
}
And a list() function that displays the localStorage data:
function list()
{
var html="<table>";
for (var i=1; i < localStorage.length; i++) {
q=get( localStorage.key(i));
if(q.id !=undefined)
html+="<tr><td>Del:<input type=button value='" + localStorage.key(i)
+ "' onclick ='remove(this.value);' /><td><td>"
+q.subject + "</td><td>" + q.message + "</td><td>"
+ getDate() + "</td></tr>";
}
html+="</table>";
document.getElementById("divList").innerHTML =html;
}
There is also a search() function:
function searchItem( val)
{
document.getElementById("divList").innerHTML="";
var q;
var html="<table>";
for (var i=1; i < localStorage.length-1; i++)
{
q=get( i );
if(q !=null)
{
var subj= q.subject.toLowerCase();
var mess= q.message.toLowerCase();
val = val.toLowerCase();
if(subj.indexOf(val) >-1 || mess.indexOf(val) >-1 )
{
html+="<tr><td>Del:<input type=button value='" + q.id
+ "' onclick ='remove(this.value);' /><td><td>"
+q.subject + "</td><td>" + q.message + "</td><td>"
+q.date + "</td></tr>";
}
}
}
html+="</table>";
document.getElementById("divList").innerHTML =html;
}
You can download the sample HTML page here. It illustrates most everything you need to know in order to work with localStorage.