HTML5 localStorage: Storing Data on the Client - A Notes Application

HTML5 offers two new objects for storing data on the client: localStorage - stores data with no time limit - and sessionStorage - stores data for one session. This was previously done with cookies. Cookies are not suitable for large amounts of data, because they are passed with every request to the server, making the process slow and ineffective.

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.

By Peter Bromberg   Popularity  (8675 Views)