HTML5 Storage

The HTML5 specification introduces some options for storing data on the client side. This can be either through session storage which retains the data while the browser is open or local storage which retains the data after the browser is closed.

It is worth noting that HTML5 storage data is stored unencrypted and is accessible to anything from the same domain. While I was able to play with HTML5 storage in Chrome using a local file, this didn't work with Internet Explorer 9 and it appears that it will only work with IE9 when being pulled from a web server.

You can check if HTML5 storage is supported by the client's browser with the following:

	if(typeof(Storage) == "undefined")
	{
	alert("Local storage is not supported by your browser.");
	}
	else
	{
	alert("Local storage is supported by your browser!");
	}

view raw HTML5StorageSupport.js hosted with ❤ by GitHub

Simple data can be stored and retrieved in the following way:

	localStorage.setItem("Some Key", "Some Value");
	var itemFromStorage = localStorage.getItem("Some Key");

view raw HTML5LocaStorageGetSetComplex.js hosted with ❤ by GitHub

Complex data types can be stored and retrieved by converting them to a string before storing using JSON.stringify() and then converting them back using JSON.parse():

	var setEntry = new Object();
	setEntry.Name = "Bob";
	setEntry.Address = "123 A Street";
	localStorage.setItem("An Address", JSON.stringify(setEntry));
	var getEntry = JSON.parse(localStorage.getItem("An Address"));
	alert(getEntry.Name + " - " + getEntry.Address);

view raw HTML5LocaStorageGetSet.js hosted with ❤ by GitHub

I put together a quick demo using HTML5 local storage to create a phone book that supports adding, editing and deleting. It can be found here.