A Web Designer & Developer in Wichita Falls, TX. Working for Crane | West Advertising Agency.
James Fleeting
 
10 May

HTML5 localStorage – Part Two

In part one you got some information on what localStorage was and what browsers supported it. You also saw how easy it was to save an item, get the item from the database and then remove it. I know your still trying to figure out what can you actually do with this localStorage and your about to find out. Again remember that my love for jQuery has not faded so you will see some jQuery through out the code and as I said before feel free to use good ol’ javascript instead of jQuery if you feel the urge.

For this Time Tracking web app we are going to allow you to input a project name, hours spent working on that project and the date. Now these three values will need to be stored together with the same key and following the simple method used in Part One won’t work. However this is a lot easier then you might think. You will create a new array and store those three values. Then with a .join() when saving the item it will give you those three values stored in the database under whatever key you want. In our case we are going to keep it simple and make key an id. First lets get our values ready. Since the key will be a unique id we will grab the current date and get the number of milliseconds since January 1, 1970. This will give us a unique id for each item in the database.

Copy to Clipboard
1
2
3
4
5
6
var newDate = new Date();
var itemId = newDate.getTime(); //creates a unique id with the milliseconds since January 1, 1970
var values = new Array();
var name = "Some Project";
var hours = "12";
var date = "5/7/2010";

Now that we have our key and our values ready we need to push them into the values array and save them to the database following the same format from Part One which would look like this:

Copy to Clipboard
1
2
3
4
5
6
7
8
9
10
11
values.push(name); //push each value into our values array
values.push(hours);
values.push(date);
 
try {
	localStorage.setItem(itemId, values.join(";")); //store the item in the database
} catch (e) {
	if (e == QUOTA_EXCEEDED_ERR) {
		alert("Quota exceeded!");
	}
}

First we pushed each value into our array and we do localStorage.setItem() to save the item to the database. The key is itemId but for values we do something a little different then before. Since the values are now in an array we are going to join them with a semicolon. This means the values look like this: Some Project;12;5/7/2010. Now this allows you a little more familiar mySQL format, picture each semicolon splitting up the values into columns. Of course this is useless if you can’t retrieve the item from the database and do something with it so lets move onto getItem and get those values back. We are going to get the first item (zero) from the database.

Copy to Clipboard
1
2
3
4
5
6
7
8
9
10
var itemKey = localStorage.key(0);
var values = localStorage.getItem(itemKey); //values currently look like 'Some Project;12;5/7/2010'
values = values.split(";");
var project = values[0];
var hours = values[1];
var date = values[2];
 
document.write('Project Name: ' + project + '<br />');
document.write('Hours Logged: ' + hours + 'hours<br />');
document.write('Date Logged: ' + date);

We use getItem() to retrieve the values from the database. Now we don’t want the values in a single string like that so we are going to do a .split(“;”) on the string to create a new values array. Now we can access each “column” of that item and display the data. As you should be able to see, just because we are only dealing with key-value storage, we are still able to store more then you might think. I want to show you one last thing dealing with removing items from the database. You are able to remove a single item from the database or clear the entire database like so:

Copy to Clipboard
1
2
localStorage.removeItem(id); //id (or key) of the value you want to delete
localStorage.clear(); //be careful as this will clear the entire database for that user

In Part Three we will continue this time tracking web app and go through working with multiple rows/items in the database, displaying all of those items and allowing those items to be removed individually. You can see a working demo of the above code here to see it working in a browser.

 

Comments are closed.