HTML5 LocalStorage

The use of HTML5 in application development is increasing with each passing day and tech giants like Apple and Adobe are increasingly employing HTML5 developers for their application development process. localStorage is a client-side key-value database, meaning it is stored in the users browser. This means the users data is saved on their machine inside their browser. This also means that their data is only available to them when on that machine and in that browser. Remember that localStorage is per browser and not per computer.  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. Following is a simple example of using localStorage.

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.

To view this localStorage in Firefox, you would need to use the DOM area in Firebug and find ‘get localStorage’.  Expanding this will show you the items in the database. If you’re 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 user’s browser even supports localStorage and if it doesn’t we can warn them. Now the code above would look like this:

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 a future tutorial, we would add further functionality and create some useful applications.

Looking for a quality hosting service? here are a few I suggest.
BlueHost | HostGator | Media Temple
Ali has been an entrepreneur in web, video and related technologies. Having worked with many business across the globe, Ali stands truly a great pillar in the business working with him.