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;
localStorage.setItem('mcLast',last);
 
4.     To retreive data
localStorage.getItem('mcLast',last);
document.getElementById('lastname').innerHTML = last;
 
5.     To delete all data
localStorage.clear();
Or to delete a specific item
localStorage.removeItem(key);
 
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

Feedback

No comments posted yet.


Post A Comment
Title:
Name:
Email:
Comment:
Verification: