Although HTML5 isn’t 100% finalized, there are a few things that have been finished up and implemented in the newer browsers. One such feature is a local storage, it doesn’t provide any fancy functions it’s more of a client side Memcached. It’s a persistent storage area that’s accessed using a key, value pair, attached to the window object. 


window.localStorage['key'] = 'value'

Setting the value of the key is just a matter of assigning a variable. Obtaining an already saved value is also just as easy.


var value = window.localStorage['key']

Here is a small sample using a few basic functions to show how it might be used. You are able to enter text in the box and save it. when the page reloads that new value will display in the browser. When you click on load it will load whatever value is saved in the current storage.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Html LocalStorage</title>
		<script type="text/javascript" charset="utf-8">
			function save() {
				obj = document.getElementById('btn_text');
				if(obj.value)
					window.localStorage['text'] = obj.value
			}
			function load() {
				obj = document.getElementById('btn_text');
				value = window.localStorage['text'];
				if(value)
					obj.value = window.localStorage['text'];
			}
		</script>
	</head>
	<body onload="load();">
		<input type="text" value="" id="btn_text">
		<input type="button" onclick="save();" value="Save"> | <input type="button" onclick="load();" value="Load">
	</body>
</html>

Keep in mind that because of browsers are only starting to roll out these implementations now, it might not work in all browsers. Also be sure to use the most recent versions.

I’ll be writing and posting more HTML5 posts, giving examples and code on implementing some of the new exiciting things that will be out soon.