Home Contact

Natasa Gavrilovic

my Explorations in Coding

HTML5: LocalStorage()

LocalStorage() is one of the new features of HTML5 that found widespread use among PC and phone developers. 
It can save up to 5MB of data locally, on a user device in a key-value database inside a web browser. Data can be retrieved only from a device where was permanently saved until it gets deleted by user or programmatically.
To be able to take advantage of this and other HTML5 features, user needs to have a compatible browser. Currently, at the time I am writing this post, there is no browser that fully supports HTML5. The list and scoring can be found on http://www.browserscope.org/
How LocalStorage() function can be implemented?  
1.     First, user browser needs to be check for compatibility. A quick JavaScript function or one of the check tool ex.modernizr will do the work
2.     Create a new database if don’t exist
db = openDatabase("GooglePreferences", "1", "MyGooglePreferences", 500000);
3.     Add key and value
Val last name = document.getElementById('lastname').innerHTML;
4.     To retreive data
document.getElementById('lastname').innerHTML = last;
5.     To delete all data
Or to delete a specific item
LocalStorage() can be easy implemented and it can replace cookies where large amount of data needs to be saved. For small data storage, cookies are still a good option thou ;)


Step 2 - only for development with Sqlite (Web SQL Database)

Updated on July 07, 2011

Monday, June 13, 2011 12:10 PM


No comments posted yet.

Post A Comment