Store data locally with HTML5 Web Storage

Now new version of HTML5 having number of new API one of the is Storage API, which allow you to store data of use locally. Here in following post I am going to describe Storage API.

Cookies vs. Storage
In previous version of HTML allows to store data locally with the help of Cookies but the

•  issue with the cookies is its not allow to big object and which can be easily done. Storage allows 5M (most browsers) or 10M (IE) of memory at disposal. 
• Another problem is cookies get sent to server with each HTTP request which in term increases traffic.

Storage
Now lets start using the store in application

if(typeof(Storage)!=="undefined")
{
  alert("storage is supported and you can store data in it"); 
}
else
{
 alert("Get new version of browser or use browser which support storage");
}

So here in above as you can see, first line of code check weather browser supports/have Storage object. It's good to check because most of the older browser is not supporting and as its new feature its mostly supported in new browsers.

After doing check for Storage support decide either you want to store data for given session only or want to store data which available even after session is over and when user come back.
So there are two type of object which is explained below

• sessionStorage is used to store within the browser tab or window session. so it allows to store data in a single web page session.
• localStorage is used to kept even between browser sessions. so it allows to access data after the browser is closed and reopened again, and also instantly between tabs and windows.

Note : Storage data created by one browser is not avaible in other browser. for example created in IE is not available in FireFox.

Following is the way you can use the localStorage and sessionStorage in your application.

//sessionStorage 

//set and get object 
sessionStorage.setItem('myKey', 'myValue');
var myVar = sessionStorage.getItem('myKey');
//another way to set and get 
sessionStorage.myKey = 'myValue';
var myVar = sessionStorage.myKey;

//remove item
sessionStorage.removeItem('myKey');

//clear storage 
sessionStorage.clear();

//localStorage 
//set and get object 
localStorage.setItem('myKey', 'myValue');
var myVar = localStorage.getItem('myKey');
//another way to set and get 
localStorage.myKey = 'myValue';
var myVar = localStorage.myKey;

//remove item
localStorage.removeItem('myKey');

//clear storage 
localStorage.clear();

as in the above code both of the object support same set of methods to store and retrieve data.

• setItem - allows to set value. 
• getItem - allows to get value.
• removeItem - allows to remove object from storage. Note: if it used like removeItem(), it removes all stored object , so be careful when removing -to remove specific object use removeItem("myKey"). 
• clear - clear storage i.e. clear all stored data.

and as you can see storage store data in key value pair.

Conclusion
Web Storage simplify the storing of object in client and also have advantage over cookies, but its always good to not store sensitive information in the client side storage as storage is not provide that much security.

Thanks for reading and do post comment if you like it or something is missing or wrong.

GeoLocation API in HTML5

HTML5 have cool feature that is provide gelocation of the user on the fly without using any extra services that we do right now. This feature is supported by Gelocation API which is part of HTML5.

Following is sample Code in JavaScript how it works.

<button onclick="getGeoLocation()">Get GeoLocation</button>
<script>
  function getGeoLocation()
  {
    if (navigator.geolocation)
    {
      navigator.geolocation.getCurrentPosition(showPosition,HandleError);
    }
    else
    {
      alert("Geolocation is not supported by this browser.");
    }
  }
  function showPosition(position)
  {
      alert("Latitude: " + position.coords.latitude + 
               "    Longitude: " + position.coords.longitude); 
  }
</script>

Code is work in this pattern.

1. First when user click on button it calls getGeoLocation
2. In that function its first check navigator.geolocation supported or not.
3. It calls Inbuilt JavaScript method getCurrentPosition which returns Postion object
4. This Position object used by showPostion to display Latitude and Logitude 

Below is handleError function that used to handle any error which might occur while accessing GeoLocation of the user.

  function HandleError(error)
  {
    switch(error.code) 
    {
     case error.PERMISSION_DENIED:
      alert("User denied the request for Geolocation.");
      break;
     case error.POSITION_UNAVAILABLE:
      alert("Location information is unavailable.");
      break;
     case error.TIMEOUT:
      alert("The request to get user location timed out.");
      break;
     case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.");
      break;
    }
  }

Code of the function is self-explained by the values given.

Update GeoLocation as you Move with watchPosition
There is one of function which is part of Gelocation API that is very useful to get continues update of location as user moves from one place to another palce.
watchPosition - function that is used to achieve the above function.
To see how this works actually just replace getCurrentPosition function with watchPosition.
To stop updates from watchPosition you can use clearWatch() of API.

Position Object
Both method returns Postion object as output. Following is list of property that is part of Position Object.

coords.latitude	The latitude as a decimal number
coords.longitude	The longitude as a decimal number
coords.accuracy	The accuracy of position
coords.altitude	The altitude in meters above the mean sea level
coords.altitudeAccuracy	The altitude accuracy of position
coords.heading	The heading as degrees clockwise from North
coords.speed	The speed in meters per second
timestamp	The date/time of the response

Leave comment if you have any query or if you like it.