Getting Started with Local Storage

Posted by Pete Schuster on August 10, 2012

In addition to all the new semantic HTML elements that came with HTML5, so did a bunch of other great features. The one we will focus on today is Local Storage. Local Storage is a lot like what it sounds… storage on your local machine. This means that an HTML5 application can store data that is only accesible through the browser/computer it was set to. Below is a quick tutorial on creating a simple To Do List application using Local Storage.

The Basics

Local Storage is pretty simple to understand, and there are three main functions you need to use. setItem(), getItem(), and clear(). Again these functions and pretty self explanitory, so let’s move onto some code. Checkout the live demo.

Example HTML

<form id="task_form">	
	<input id="task_input" type="text" />
</form>
 
<h1>Today's Tasks</h1>
 
<ul id="task_list" class="task_list"></ul>
 
<a id="task_clear" class="button" href="#"><span>Clear List</span></a>

Example SCSS

ul.task_list {
 
	li 	{ cursor: pointer; }
 
	li.task_complete { text-decoration: line-through; }
}

The CSS is pretty basic. We’re just making each LI appear as clickable but using cursor: pointer, then if its marked as complete, add a strike through.

Example JavaScript (jQuery)

if ( jQuery( '#task_form' )[0] ){ //Checks to make sure our list is present
 
 
	//sets some variables for common elements
	var form 	= jQuery( '#task_form' ),
	    input 	= jQuery( '#task_input' ),
	    list 	= jQuery( '#task_list' ),
	    tasks 	= '',
	    btnClear 	= jQuery( '#task_clear' );  
 
 
	//adds the list items already stored
	list.append( localStorage.getItem( 'tasks' ) );
 
 
	//if the form is submitted
	form.submit( function( e ){
 
		//local function variables
		var myPost  = jQuery( '#task_input' ).val(), //get the value of the input
		    newItem = '<li>' + myPost + '</li>'; //add some html to the new value
 
		//adds the new item to the bottom of the list
		list.append( newItem );
 
		//sets the html of the list to a variable
		tasks = list.html();      
 
		//sets the newly appended list to storage
		localStorage.setItem( 'tasks', tasks );
 
		//prevents the page from reloading from
		//the form submission
		return false;
 
	} );
 
 
	//click function to make of item as complete or remove it
	list.find( 'li' ).live( 'click', function( e ){
 
 
		//checks to see if the task is marked as complete
		//if the tasks is complete, remove it from the html and
		//resave the list in localStorage
		//if its not marked as complete, mark it
		if ( jQuery( this ).hasClass( 'task_complete' ) ){
 
			jQuery( this ).remove();
 
			tasks = list.html();      
 
			localStorage.setItem( 'tasks', tasks );
 
		} else {
 
			jQuery( this ).addClass( 'task_complete' );
 
		}
 
	} );
 
	//click function to clear localStorage and
	//clear the html of the list
	btnClear.click( function( e ){
 
		localStorage.clear();
 
		list.html( '' );
 
		e.preventDefault();
 
	} );
 
}

See the comments in the code for further explanation.

Wrapping Up

So all in all, localStorage is pretty simple to use and understand. You can how powerful this could be for creating feature rich HTML5 applications. So what do you think? Not that intimidating right? Creating this little program was fun, can you think of any other situations were localStorage would be useful?

Pete Schuster