HTML5 is becoming a common platform for both Web and Apps. I personally started learning HTML5 when I decided to develop Apps for Android and iPhone. As I failed to manage time enough to learn native App development for Android and iPhone, I was searching for alternative technology I already had knowledge enough of HTML, CSS and Java Script. Thankfully to HTML5 , I have developed some Hybrid Apps with help of platform like Intel XDK , Apache Cordova . I have frequently used HTML5 local storage in all my Apps which is very fast and consistent.
With HTML5 local storage, web applications, hybrid mobile Apps & web Apps can store data locally within the user’s browser. Before HTML5, application data had to be stored in cookies, included in every server request. HTML5 Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB). Here I will show how to use HTML5 local storage. HTML5 local storage use key => value technology.
Create a local storage object
<script type="text/javascript">
var db = getLocalStorage();
function getLocalStorage() {
try {
if(window.localStorage ) return window.localStorage;
}
catch (e){
return undefined;
}
</script>
A local storage object db is created. Now you can store and retrieve data from HTML5 local storage.
Store data to HTML5 local storage
1. Store string and integer
<script type="text/javascript"> db.a='test string'; db.b=12345; </script>
Above you will find in your local storgae two keys a and b and their corresponding value will be ‘test string’ and 1234.
2. Store JSON data to HTML5 local storage
<script type="text/javascript">
var json_data = '{"firstName":"John", "lastName":"Doe","id":123456}';
db.json_data=JSON.stringify(json_data);
</script>
To store json object you have to use JSON.stringify() function.
Retrieve data from HTML5 local storage
1. Retrieve simple string and integer data
<script type="text/javascript"> if(db.a) var a=db.a; alert(a); if(db.b) var b=db.b alert(b); </script>
Here we retrieve earlier stored local storage key’s value to java script variables a and b. You should always use if(db.a) to avoid unnecessary error.
2. Retrieve JSON data from storage
<script type="text/javascript"> if(db.json_data) var json_data=JSON.parse(db.json_data); alert(json_data); </script>
Following the above strategy you will store as much data as possible until storage exceeds 5MB. In chrome browser you will directly access your domain html5 local storage. Go to Options -> More tools -> Development tools -> Resources.
HTMl5 makes huge change in Web and Apps development and Apps developer are shifting to HTMl5 as it is supported to all platforms ( Android, iPhone, Firefox etc. ). HTMl5 has many storage technology like local storage, IndexedDB, Web SQL, SQLite but Local Storage is supported to all browsers while others are not. Below I refrenced some Android Apps that I have built purely based on HTML5.
