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.
|
1 2 3 |
localStorage.setItem("name", "Hello World!"); //saves to the database, key/value document.write(localStorage.getItem("name")); //Hello World! localStorage.removeItem("name"); //deletes the matching item from the database |
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.
|
1 2 3 4 5 6 7 |
try { localStorage.setItem("name", "Hello World!"); //saves to the database, "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 } } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if (typeof(localStorage) == 'undefined' ) { alert('Your browser does not support HTML5 localStorage. Try upgrading.'); } else { try { localStorage.setItem("name", "Hello World!"); //saves to the database, "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("name")); //Hello World! localStorage.removeItem("name"); //deletes the matching item from the database |
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.
BlueHost | HostGator | Media Temple
