Building a To-do List with Local Storage

Saturday, March 27th, 2010

While I keep on trying to push web developers to start experimenting and exploring HTML 5 and CSS3 technologies, I will keep introducing you to them. Today we will experiment with HTML5 local JavaScript databases, a new feature lots of web developers are excited to start using. You will be walked through on how to create a simple to-do list with jQuery and local storage.

The Basic Template

Click Image to Download

For the sake of your time and the length of the tutorial I have provided a starting template for you. It contains just a basic page with a 3 tab system (not working yet), and some simple CSS to make the page look nice. Later on we will be adding more to the markup and CSS though.

Switching the Tabs

The first thing to accomplish is how to switch the tabs. The script is quite easy to write. First, on document load we want to show the first area with the to-do items to show and the navigation tab to be highlighted. Then, when we click another tab we want to hide all div elements with the “.content” class to become hidden, and remove the’ highlight from the current active tab. Finally, we want to highlight the new tab and show the new content.

$('#tabs li').click(function() {
	//Clear All Content Areas
	$('.content:not(#new) ul').empty();

	//Load Items
	if($(this).text() == 'todo') {
		loadItems(0);	//Will learn later
	}
	else{
		loadItems(1);	//Will learn later
	}

	//Remove Highlighting, Hide Elements
	$('.active').removeClass('active');
	$('.content').hide();

	//Add Highlighting, Show Element with Id of Text
	$(this).addClass('active');
	$('#' + $(this).text()).show();
});

Opening the Database

Now that we have all of our basics done it is time to start working with are database, and the first things to do is to open it. We will assign the database to a variable so we can call it over and over. Be aware that only browsers that support “window.openDatabase” can use local databases, we will check that in our code.

//Database Instance
var database;

try {
	//Check Browser Support
	if(window.openDatabase) {
		database = openDatabase(
			'To-Do List', 					//Database Name
			'1.0', 							//Database Version (1.0)
			'To-Do List by TutToaster', 	//Database Description
			200000							//Database Size (max: 200000)
		);

		//Check for Opened
		if(!database) {
			alert('Database failed to open. Please reload.');
		}
		else {
			//Initialized
			initialize();
		}
	}
	else {
		alert('Your browser does not support local databases.');
	}
}
catch(error) {
	if(error == 2) {
		//Version Mismatch
		alert('Database Version Mismatch');
	}
	else{
		//Other Error
		alert(error);
	}
}

Initialize the To-Do List

Now that we have our database working we need to make a function to start our to-do list. We need to check if it is their first time using the to-do list or if they are returning. If it is the first time we need to create a new table to hold the to-do items. If it is not their first time visiting the to-do list then we can just load the items that are not done for the ‘#todo’ div.

function initialize() {
	//New Database Transaction
	database.transaction(function(data) {
		//Look if table is there
		data.executeSql('SELECT COUNT(*) FROM todos', [],
			function(data, result) {
				loadItems(0);
			},
			function(data, error) {
				//No Table, Create One
				data.executeSql('CREATE TABLE todos(id INTEGER PRIMARY KEY, item VARCHAR(24), date VARCHAR(24), done INTEGER DEFAULT 0)', [],
					function(data, result) {
						loadItems(0);
					},
					function(data, error) {
						alert('Database table failed to open/create. Try reloading?');
					}
				);
			}
		);
	});
} 

Loading the Items

So, now we have the database open, our table is created and our to-do list initialize function is just about done, but we need to load the items. For this we will create a function that has a parameter passed through with a value of 0 if it is not done and 1 if it is done. The function will find the to-do items with the said parameter and append them to the correct div (“#todo” or “#done”).

function loadItems(type) {
	//New Database Transaction
	database.transaction(function(data) {
		//Get Items with type (todo[0] or done[1])
		data.executeSql('SELECT * FROM todos WHERE done = ? LIMIT 10', [type],
			function(data, result) {
				//Determine the Container
				var container = (type == '0') ? 'todo' : 'done';

				//Filter through each result
				for(i = 0; i < result.rows.length; ++i) {
					//Each Items Array
					var row = result.rows.item(i);

					//Create a Element for Result, Append it
					$('<li />', {
						id: row['id'],
						html: row['item'] + '<p>' + row['date'] + '</p>',
						click: function() {
							if(container == 'todo') {
								itemFinished($(this).attr('id'));
							}
						}
					}).appendTo('#' + container + ' ul');
					//AppendTo Container(#todo or #done) ul
				}
			},
			function(data, error) {
				//There was a problem. :[
				alert('There was a problem with our query. Please reload.');
			}
		);
	});
}

Finishing a To-Do Item

Once you finish an item from your to-do list you are going to want to make it change from the list of to-do items to the list of done items. This will be done by getting the “id” of the list item and searching for a row with that “id” and setting the “done” column from “0” to “1”.

function itemFinished(id) {
	//New Database Transaction
	database.transaction(function(data) {
		//Find and Set Item (column: done) to 1
		data.executeSql('UPDATE todos SET done = 1 WHERE id = ?', [id],
			function(data, results) {
				//Slide Up Clicked Div
				$('#' + id).slideUp();
			}
		);
	});
}

Create a New Items

Now onto one of the most important parts, creating new to-do items for your list. In the template you downloaded you will find the items I refer to on the “#new” page or div. What we are going to do is when the “#create” button is clicked we create strings of the inputted variables then create new entries into the database with the information from those strings. Once it successfully is entered a pretty message box will appear.

$('#create').click(function() {
	//Inputed Variables
	var item = $('#item').val();
	var date = $('#month').val() + ' ' + $('#day').val();

	//Sql Statement
	var sql = 'INSERT IGNORE INTO todos (item, date) VALUES (?, ?)';

	//New Database Transaction
	database.transaction(function(data) {
		data.executeSql(sql, [item, date],
			function(data, results) {
				//Show Success Message
				$('#message').text('Todo successfully added!').addClass('success').show();
			},
			function(data, error) {
				//Show Error Message
				$('#message').text('There was a error! Please retry!').addClass('error').show();
			}
		)
	});
});

The Small Thing

Here are just a couple other small things to add to the JavaScript. The first part to show “#todo” on default and highlight its tab. The second to hide the success and error message on click.

//Show #todo on default
$('#todo').show();
$('#tabs:first-child').addClass('.active');

//Fade Out #Message onClick
$('#message').click(function() {
	$(this).fadeOut();
});

Wrapping Up

Finally, we are done. You might have been able to tell interacting with the database is very similar to interacting with a PHP MySQL database, just not as much configuration. Currently local databases only works in WebKit browsers, hopefully in the near future more browsers will catch on.

I hoped you enjoyed this tutorial, and that you will explore further into HTML5 Databases and someday show us what you are capable of with this new technology!

The testking offers an exceptional training program for designer/developers. Learn the best web designing practices through the use of self paced testking HP0-Y26 tutorials and testking 000-076 study guide.

Tags: css3, database, html5, tutorial, web design
Posted in Tutorials | 20 Comments »