Cookies vs HTML 5 web storage-Comparison

What you mean by web storage?When we are filling a form in online we can see that  in some of the fields the details are coming automatically when we are clicking on those fields. How it is possible? the answer is cookies.

Cookies are small pieces of messages sending from the web server to the web browser. In the web browser it is stored in the form of small text files. Cookies are used to provide the users a more personalized experience for browsing.

Disadvantages of Cookies

 With each server calls cookies will send the data stored to server, this will affect the site’s performance.

web storage space for cookies is too low, less than 4kb.

HTML 5 web storage

HTML 5-web storage

Compared to cookie, HTML 5 web storage has many advantages.

• Size is not limited to < 4 kb , web storage can use 5 mb of space.
• Web storage not sending the data to server with each server calls, this will improve the sit performance.
• improved security.

There are two different methods to store data in browser using web storage.

1. Local storage
2. Session storage.

 Local Storage, stores data permanently in the browser it wont be get deleted or erased automatically. We have to manually delete those items if we don’t want.

 Session storage , will save the data for a short period of time. The data stored will deleted when we close the browser or tab. So it will store the data for particular session only.

The data that we stored using either any of the web storage methods in a browser will not be available in other browsers.

Browser support for web storage

Before writing the code for storing data in web storage, we have to check whether the browser will support web storage feature or not.

So for that we have to use the following lines of code.

if(typeof(Storage)!="undefined")

{

// code for web storage

}

else

{

alert("Sorry, Your browser won't support web storage.");

}

Storing data using web storage

The web storage will store the data as a set of key-value pairs .Where, key will be the unique key to store and read data and value will be the actual value that we are storing.

(“name”,”kamal”);

Here  name and kamal is the key and value respectively.

For storing data we are using the setItem() method.

localstorage.setItem("key","value");

sessionstorage.setItm("key","value");

The value can be anything Number ,String , Objects anything we can store.If we are using Objects it should convert to JSON string before storing.

localstorage.setItem("PI",3.14);

sessionstorage.setItem("PI",3.14);

localstorage.setItem("name","kamal");

sessionstorage.setItem("name",kamal);

localstorage.setItem("sample"JSON.stringify(object));

sessionstorage.setItem("sample"JSON.stringify(object));

we can use one more method to store data in web storage by simply using the assignment operator,

localstorage.PI=3.14;

locastorage["sample"]=JSON.stringify(Object);

sessionstorage["sample"]=JSON.stringify(Object);

Reading data from web storage

Now , we have seen how to store data in to web storage. It’s the time to fetch the stored information. For that,

we can use the getIem() method.

getItm(“key”) ;

This will give the value stored with the key “key”.

var value=localstorage.getItem("PI");

var value=sessionstorage.getItem("PI");

var object_sample=JSON.parse(localstorage.getItem("sample"));

these will return the value stored. And we can use one more method to read the data.

var value=localstorage.PI;

var value=sessionstorage.PI;

var object_sample=JSON.parse(localstorage["sample"]);

Deleting data from web storage

So the data that we stored in local storage is permanently get stored. If we need to delete the stored value we can use the removeItem() method.

localstorage.removeItem("PI");

sessionstorage.removeItem("PI");

This will delete the items with the key’s given. An will free  the space. One more alternative way is there to delete an item from web storage.

delete localstorage.PI;

delete sessionstorage.PI;

And for deleting all the data stored in the web storage we will use the mehod clear();

localstorage.clear();

sessionstorage.clear();

Storage Event

Consider the situation where we are opening the same page in more than one window and we are updating the web storage from all the windows.So how the update’s will be get affected in all the windows simultaneously?

There is something called storage event, when ever we are calling any of the  setItem(), getItem() or removeItem(), the storage event will do the rest for updating all the windows through proper synchronization.

There are some fields in the storage event.

• Key – This will the unique key that we are passing through setItem() and removeItem().
• newValue – This will the value that we are going to store in the web storage.
• oldValue- This will the value in the webs storage for a particular key prior to calling the setItem() method.
• url-  This will store the address of the web page the storage has been changed.
• storageArea- This will store the session or local storage area that was chaged.

window.addEventListener("storage", function(event){

var key=event.key;

var newvalue=event.newvalue;

var oldvalue=event.oldValue;

var url=event.url;

var storageArea=event.storageArea;

});

Browser support for web storage

web storage- browser support