WEBSTORAGE

Today we are going to learn a new topic, WEB STORAGE. The name itself tells us about storing data. So let’s learn in detail what does WEB STORAGE actually mean.

• What Is Web Storage?
• Web Storage is a new feature introduced in HTML5. Using it, websites can store data on a user’s local computer. It may be for any reason, may be if a user visits a site and the user is asked to fill a form with his name and all other stuff. This information may be saved on the user’s computer and whenever the user visits this site, his name may be displayed in one corner saying “Welcome XXX” (consider XXX as the user’s name).
• In past to check authentication of a client’s computer, server’s used cookies to achieve this functionality.
• But now web storage has replaced cookies.
• How does Web Storage differ from Cookies?
• Web Storage is more secure than cookies, because cookies can bring viruses with it to client’s computer.
• Web Storage is faster than cookies.
• Web Storage stores a large amount of data of about over 5MB whereas cookies can store data of about 4KB.
• The stored data is not sent with every server request. It is only included when asked for. This is the reason why it is faster than cookies and gives a big advantage over cookies.
• Detecting HTML5 Storage Support
• Web Storage is supported by all new version browsers.
• But still to first find out if the browser really supports Web Storage before using it, you can use a simple function or the most recommended Modernizr.
• The function is shown below:

function supports_html5_storage()
{	
  try
  {
    return ’localStorage’ in window && window[‘localStorage’]!==null;
  }
  catch(e)
  {
    return false;
  }
}

• You can use above function to check if the browser supports web storage or can use Modernizr as shown below.

if(Modernizr.localStorage)
{
	//local storage available.
}
else
{
	//no local storage available.	
}

• HTML5 Web Storage objects
• There are two types of web storage objects, local and session.
• They are used as localStorage() and sessionStorage().
• They both implement same interface and have same structure.
• They are slightly different from each other.
• localStorage : It stores data with no expiration date. I mean it stores data till the user or the programming code don’t clear it.
• sessionStorage : It stores data for one session. Means it stores the data from the point of opening the browser till the point of closing the browser.
• How does it work?
• It uses a key-value pair like cookies.
• The localStorage and sessionStorage objects create a key = value pair.
• Example: key=”Name”, value=”Bob”
• They are stored in the form of strings but can be converted if needed by using the javascript functions like parseInt() and parseFloat().
• Syntax used for Web Storage
• The following syntax is used for both localStorage as well as sessionStorage.
• The syntaxes for various operations with localStorage are shown below. You can replace “local” to “session” to write the syntax for sessionStorage.
• Syntax for storing a value:

localStorage.setItem(“key1”,”value1”);  //this creates a localStorage object.
localStorage[“key1”]=”value1”;   //this creates a localStorage array.

• Syntax for getting (retrieving) a value:

alert(localStorage.getItem(“key1”));
alert(ocalStorage[“key1”]);

• Syntax to remove a value:

removeItem(“key1”);

• Syntax to remove all values:

localStorage.clear();

• Here, in the above shown syntax, setItem() method of localStorage is used to accept the key-value pair and a object is created.
• Similarly, an array of localStorage objects is also created.
• To retrieve data, a getItem() method is used to get the value through the key.
• To remove an item, directly removeItem() method is used by giving the key of the item to be removed as an input to the function/method.
• To remove all the data, a clear() method is used with localStorage or sessionStorage.

This was a short and sweet intro of WEB STORAGE and various concepts related to it. We will try to learn it practically in the next session.