As you all know that its been exciting to see lots of new and good features of  HTML5 and CSS3. I have been looking for things that would be very good for the future of HTML5 and CSS3, one such thing that might be very useful in the future is the HTML5 localStorage(), which is a client-side database. The values in this database is stored as a key value pair. This database resides on the users browsers and not on the server. You need not write SQL insert/update/delete for manipulating this database. There are functions provided to this which helps in storing, updating and deleting the data stored in localStorage(). This database is available per browser so if some data is stored in the Firefox browser and you switch to Safari you won’t be able to use the localStorage data in firefox. This is a browser dependent feature, currently its supported by most modern browsers including Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+ and Chrome 4+.

Let me show you how to code to use the localstorage() of your browser:

1
2
3
4
5
6
7
8
9
10
11
12
13

if (typeof(localStorage) == 'undefined' ) {
	alert('Browser support unavailable, try upgrading your browser');
} else {
	try {
		localStorage.setItem("date", "9th July 2010"); //INSERT, "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("date"));
	localStorage.removeItem("date"); //DELET
}

You can use this localStorage() in various ways, you can use it to track the time spent by a user on your site, you can store the date the user logged in the last time etc. In the first impression it may not sound very good to you but its a very nice feature to have for the future.