Hello, world!

HTML 5 Web Storage HTML

More than using cookies the HTML Web Storage gives methods by which browsers can save key/value pairs. HTML tutorial defines web storage such as local storage, session storage and the delete web storage.



HTML5 - Web Storage

Two methods are launched in HTML5 related to HTTP session cookies, which can be used for saving small amount of data on the client side and to overcome the following problems:
Cookies are contained with each HTTP request, thus slowing down your web application by unnecessarily transmitting similar data over and over.
Cookies are contained with each  HTTP request, thus transferring data unencrypted over the web (except your full web application is provided over SSL)
Cookies are restricted to about 4 KB of data - sufficient to slow down your request, however  not sufficient to saved necessary information.

Local Storage

The HTML5 Local Storage is intended for storage that extents multiple windows, and persists ahead the present session.
The saved information on the localStorage object will not expire.
The information will not be removed when the browser is turned off, and will be available anytime.

This is an example on how to set a local storage variable and attained that variable each time this page is accessed.

HTML code example local storage:

<script type="text/javascript">                        
    if( localStorage.hits ){
       localStorage.hits = Number(localStorage.hits) +1;
    }else{
       localStorage.hits = 1;
    }
    document.write("Total Hits :" + localStorage.hits );
</script>                        
<p>To add number of hits refresh the page.</p>
<p>To see the result, close the window and open it again.</p>

HTML output local storage:

To add number of hits refresh the page.

To see the result, close the window and open it again.



Session Storage

The HTML Session storage is intended to for situations that one user performing a single execution, possibly yet performing two or more executions in various windows concurrently.
Session Storage is launched to maintain a storage area that is accessible for the period of the page session.
HTML5 sessionStorage attribute would be used for hanging on to temporary data that should be stored and restored if the browser is unintentionally reloaded.
A new session will be started when a new tab or window is opened.

Example on how to set a session variable and acquire that variable:

HTML code example session storage:

<script type="text/javascript">            
    if( sessionStorage.hits ){
       sessionStorage.hits = Number(sessionStorage.hits) +1;
    }else{
       sessionStorage.hits = 1;
    }
    document.write("Total Hits :" + sessionStorage.hits );
 </script>            
 <p>To add number of hits refresh the page.</p>
 <p>To see the result, close the window and open it again.</p>

HTML output session storage:

To add number of hits refresh the page.

To see the result, close the window and open it again.



Delete Web Storage

Saving your personal data on local machine is risky and not secured.
The Session Storage Data would be cleared by the browsers instantly after the session has ended.
You can clear a local storage setting via invoking the localStorage.remove('key'); where 'key' is the key of the value you want to delete. While the invoking the localStorage.clear() will delete all settings.

Following is the code which would clear complete local storage:

HTML code example delete web storage:

<script type="text/javascript">                        
    localStorage.clear();
    // Reset number of hits.
    if( localStorage.hits ){
       localStorage.hits = Number(localStorage.hits) +1;
    }else{
       localStorage.hits = 1;
    }
    document.write("Total Hits :" + localStorage.hits );                                    
 </script>                        
    <p>Refreshing the page would not to increase hit counter.</p>
    <p>Close the window and open it again and check the result.</p>
    

HTML output delete web storage:

Refreshing the page would not to increase hit counter.

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