Web Storage Demo With Example using HTML 5

Hello friends, Today we will start to learn new topic using Web Storage Using HTML 5 with Example. So that you can learn step by step. Now Let us start to play web Storage in Html 5.
We are assuming that you know HTTP session cookies. There are two mechanisms by HTML 5, similar to HTTP session cookies. But there are some Draw Backs.
First is that Cookies are include with HTTP request so there are problems to slow down your web sites by transmitting the same data.
Second is that sending data not encrypted over the internet and also Cookies are limited data transmission 4 kb. There are mot enough to store required data.
So, HTML 5 provides to handle Such type of situations using session storage and local storage.
What is Session Storage?
It is designed for scenarios where the user is carrying out a single transaction. but user can be carrying out multiple transactions in different windows at the same time.

For Example: Use Given Code in body section.
Hello friends, Today we will start to learn new topic using Web Storage Using HTML 5 with Example. So that you can learn step by step. Now Let us start to play web Storage in Html 5.
We are assuming that you know HTTP session cookies. There are two mechanisms by HTML 5, similar to HTTP session cookies. But there are some DrawBacks.
First is that Cookies are realated to HTTP request so there are problems to slow down your web sites by transmitting the same data.
Second is that sending data unencrypted over the internet and also Cookies are limited data transmission 4 kb. There are mot enough to store required data.
So, HTML 5 provides to handle Such type of situations using session storage and local storage.
What is Session Storage?
It is designed for scenarios where the user is carrying out a single transaction. but user can be carrying out multiple transactions in different windows at the same time.
For Example: Use Given Code in script section.

< script type="text/javascript"> if( sessionStorage.hits ){ sessionStorage.hits = Number(sessionStorage.hits) +1; }else{ sessionStorage.hits = 1; } document.write("Total Hits :" + sessionStorage.hits );

 
Refresh the page to increase number of hits. Close the window and open it again and check the result. Refresh the page to increase number of hits. Close the window and open it again and check the result. What is Local Storage? It is designed for storage that spans multiple windows, and lasts beyond the current session. For Example: < script type="text/javascript"> if( localStorage.hits ){ localStorage.hits = Number(localStorage.hits) +1; }else{ localStorage.hits = 1; } document.write("Total Hits :" + localStorage.hits ); < /script>

Refresh page to increase no of hits.

Close the window and open it again and check the result and see magic.