A quick example on how to use HTML5 local storage, I was surprised on how easy it is to use. HTML5 introduces two new methods of storing local information on a user's browser, localStorage and sessionStorage. They are both used the same way, however localStorage persists while sessionStorage, as you would imagine only lasts as long as the browser's session.

Previously the only way to store data on a local desktop was to use cookies, which are limited in how much you can store. So the typical usage became storing a unique identifier for a user in the cookie, and using that to query a remote server to retrieve any data for that user. With local storage, you can avoid some back and forth, speed up the experience and possibly provide better security. More on that later, lets jump into the code.

There are two basic methods, one for setting an item in storage and one for getting that item, they are:

// store item
localStorage.setItem("item_key", "value I am storing");

// retrieve item
var data = localStorage.getItem("item_key");

That's it.

The storage saves values as strings, so if you want to store a different type of data object, such as an array or javascript object. You will need to JSONify, here's an example storing an array.

var listdata = [1, 2, 3];

// store array back to localstorage
localStorage.setItem("list_data_key",  JSON.stringify(listdata));

// retrieve jsonified stored data and convert
var storedData = localStorage.getItem("listData");
if (storedData) {
  listdata = JSON.parse(storedData);
}

There are a few other helper functions that you will probably use:

Remove Single Key: localStorage.removeItem("item_key");

Clear All Local Storage: localStorage.clear()

Check if localStorage is supported:

if (window.localStorage) {
  // yes!
}

Those are the basics of local storage.

Local storage is very similar to cookies in that the data is shared across all pages on the same domain. You'll have to weigh browser compatibility if you plan to use it, localStorage and sessionStorage are supported by Firefox 3.5, Safari 4.0, and IE8. Check quirksmode.org for details.

Application Usage

One area that localStorage can be particularly useful is stand-alone HTML page apps. This is what initially prompted my looking into localStorage, I wanted to build a simple checklist. There are so many existing To Do List apps on the web and phone, but none allow importing and I had a file with a 100+ items in it, which I wanted to work through. Nothing permanent, but needed to check them off and store progress over a few days. I could've easier fired up Excel and sucked them in there, but that's not real fun.

So I created a simple stand-alone web page app, which will keep track of the items from session to session. You can download and check out this app here, HTML5 Local Storage Checklist.

Over the years, I've seen a few other stand-alone HTML page apps that could use this, such as TiddlyWiki.

A huge draw back is this only works on one computer and one browser, you can't switch browsers or access remotely. So your app usage must take that in mind.

Security As I mentioned above, security might be another interesting area to utilize local storage. I work at BabyCenter, and there are a couple of applications and tools we have shied away from which required storing personal health information. You enter a new world of regulations if you store a user's health information, Hello HIPAA. However, you could utilize local storage to keep that information on the user's machine and never store.

You still have the issues of persisting the data for long term and across multiple machines, ability to back up and restore, but might be an interesting possibility.