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

HTML5 localStorage – Part One

We all know how awesome the future of the web will be with HTML5. This new spec has some amazing potential and is already getting a lot of use. From the new tags like section, article, header and footer to the video debate taking center stage with Apple vs Adobe. There are so many great things about HTML5 but today I want to go over just one; localStorage. Many of you may not have heard about localStorage or may not fully understand how to use it.

First lets start off with what localStorage is. Basically it is a client-side database. That is a database that resides in the users browser and not on your server. The difference between this database and others you may be familiar with resides in that this is for key-value storage. This means you won’t be writing some crazy sql intense application while using localStorage. However, this type of storage does offer a lot of possibilities for web apps. Remember one thing though, since this is client-side, the data stored will be on a per browser basis. If a user switches between Safari and Firefox, it won’t use the same database. Same if they use your app on one machine and go to another somewhere else, that data will only be available on the machine it was created/saved on. One last thing before jumping into some code is browser support. We all know that browser support is important depending on your target audience with your app. In this case localStorage is supported by most modern browsers including Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+ and Chrome 4+.

Now lets get into some code. Where localStorage differs from cookies or sessionStorage is that the data stored in localStorage is still there even after the browser is closed and is shared across multiple windows. You don’t have to worry about a user deleting the cookies and all their data. A quick note; because of my love for jQuery, I will be using jQuery when using localStorage. However, jQuery is not required to do any of this, I just like how clean it makes everything look. First lets see a simple example of using localStorage.

Copy to Clipboard
1
2
3
localStorage.setItem("name", "Hello World!"); //saves to the database, key/value
document.write(localStorage.getItem("name")); //Hello World!
localStorage.removeItem("name"); //deletes the matching item from the database

Can’t get much easier then that. Line 1 saves a new entry in the local database with the key of ‘name’ and the value of ‘Hello World!’. That pair is now stored in your browsers database. Line 2 gets the item from the database with the key of ‘name’. In this case would then return ‘Hello World!’. In line 3 we remove the item from the database. Due to browser specific quotas you would want to check for exceptions so you would change line 1 above to the following.

Copy to Clipboard
1
2
3
4
5
6
7
try {
	 localStorage.setItem("name", "Hello World!"); //saves to the database, "key", "value"
} catch (e) {
	 if (e == QUOTA_EXCEEDED_ERR) {
	 	 alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
	}
}

Now would be the perfect opportunity to show you how to view this localStorage and see the items in it. Currently Firefox doesn’t have a great way to view this data. You can however use the DOM area in Firebug and find ‘get localStorage’. Expanding this will show you the items in the database. If your using Safari or Chrome then you have a much better option. You are able to view these databases directly in the developer tools. Opening the Developer Tools you will notice the last item is Databases, clicking this will show you all databases, localStorage and sessionStorage info. You might also want to check to see if the users browser even supports localStorage and if it doesn’t we can warn them. Now the code above would look like this:

Copy to Clipboard
1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (typeof(localStorage) == 'undefined' ) {
	alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
	try {
		localStorage.setItem("name", "Hello World!"); //saves to the database, "key", "value"
	} catch (e) {
	 	 if (e == QUOTA_EXCEEDED_ERR) {
	 	 	 alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
		}
	}
 
	document.write(localStorage.getItem("name")); //Hello World!
	localStorage.removeItem("name"); //deletes the matching item from the database
}

As you can see saving, retrieving and removing items from localStorage is pretty easy. Of course with just the above you can’t do a whole lot. Key-value storage might at first seem limited or even useless to some but with a little code you can accomplish a lot. In part two of this localStorage series we are going to create a simple time tracking web app using localStorage. This app will show you how to accomplish more with just key-value pairing and the possibilities in the future. You can see a working demo of the above code here to see it working in a browser.

 

12 Responses to “HTML5 localStorage – Part One”

[...] support this storage. Depending on your target audience browser support may be an issue for you. HTML5 localStorage() is a four part series of articles where I will show you how to create a simple html5 time tracking [...]

Its a bit of a shame that you couldn’t have written this tutorial’s examples in plain old JavaScript. When you’re trying to explain a new future in the core language, it makes it had to delineate between what is an actual feature of the language, and what is an implementation in JQuery. Not all of us use JQuery, so it may not be intuitive for your readers what bits are JQuery specific.

@David I do understand not everybody uses jQuery however I don’t think using it for this series of posts in any way hinders the learning experience. In fact in the final code block on this article is all localStorage() is and no jQuery there. There is actually no jQuery used in this post which is the intro to localStorage() and shows how to use it. jQuery is used in the following articles but anybody with knowledge of javascript should be able to do the exact same without jQuery. I don’t believe it made it hard to tell what is a feature of localStorage and what is an implementation in jQuery as what you see above is all localStorage() is.

[...] HTML5 localStorage() is a four part series of articles where I will show you how to create a simple html5 time tracking web app using localStorage as the sole database. The series will walk you through the basics of localStorage to advanced techniques to leverage the power of this new html5 database. We won’t stop at just the functionality of the app but in part four we will cover styling the app with html5 and css3 to create an iPhone(ish) web app. [...]

[...] Read HTML5 localStorage() [...]

[...] HTML 5 Local Storage – Diving more into the functional.  Which I like. [...]

What’s with the parenthesis? localStorage isn’t a function.

[...] HTML5 localStorage() is a four part series of articles where I will show you how to create a simple html5 time tracking web app using localStorage as the sole database. The series will walk you through the basics of localStorage to advanced techniques to leverage the power of this new html5 database. We won’t stop at just the functionality of the app but in part four we will cover styling the app with html5 and css3 to create an iPhone(ish) web app. Here is a quick example of what the javascript looks like to access localStorage(); f (typeof(localStorage) == ‘undefined’ ) { alert(‘Your browser does not support HTML5 localStorage. Try upgrading.’); } else { try { localStorage.setItem(“name”, “Hello World!”); //saves to the database, “key”, “value” } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert(‘Quota exceeded!’); //data wasn’t successfully saved due to quota exceed so throw an error } } document.write(localStorage.getItem(“name”)); //Hello World! localStorage.removeItem(“name”); //deletes the matching item from the database } In the code snippet above we are doing several things including checking if your browser supports localStorage, saving a new item to the database, retrieving that item and displaying it and then removing the item. The above is your typical Hello World example but shows you just how easy it is to use. The time tracking app we will create will be storing a unique id as the key and joining multiple values into one string, as localStorage only supports storing of strings. I will be making the source code available at the end of each article along with the full source and the working app at the end of the series, which you can follow here. [...]

[...] not support this storage. Depending on your target audience browser support may be an issue for you.HTML5 localStorage() is a four part series of articles where I will show you how to create a simple html5 time tracking [...]

Great article dude, I am truely greatful for coming across this site :)

All these months I’ve been a bit hesitent to learn jQuery, for some reason. Now you’ve got me hooked!

I read all parts, and quite frankly, this has got to be the best I’ve read about localstorage. It’s really easy to understand, detailed and your coding-style is beautiful!

Thanks :)