HTML5 introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side and to overcome following drawbacks.

·     Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.

·    Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.

·     Cookies are limited to about 4 KB of data. Not enough to store required data.

The two storages are session storage (sessionStorage) and local storage (localStorage) and they would be used to handle different situations.

The latest version of pretty much every browser supports HTML5 Storage including Internet Explorer.

Before using web storage, check browser support for localStorage and sessionStorage:

if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}
The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Following is the code which would set a local storage variable and access that variable every time this page is accessed, even next time when you open the window:

<!DOCTYPE HTML>
<html>
<body>
 
  <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>Refresh the page to increase number of hits.</p>
  <p>Close the window and open it again and check the result.</p>
</body>
</html>

Note: Key/value pairs are always stored as strings. Remember to convert

them to another format when needed.

The sessionStorage Object


The sessionStorage object is equal to the localStorage object, except that it

stores the data for only one session. The data is deleted when the user

closes the browser window.

Following is the code which would set a session variable and access that

variable:

<!DOCTYPE HTML>
<html>
<body>
 
  <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>Refresh the page to increase number of hits.</p>
  <p>Close the window and open it again and check the result.</p>
 
</body>
</html>
Delete Web Storage:

Storing sensitive data on local machine could be dangerous and could

leave a security hole.

The Session Storage Data would be deleted by the browsers immediately

after the session gets terminated.

To clear a local storage setting you would need to call

localStorage.remove('key'); where 'key' is the key of the value you want to

remove. If you want to clear all settings, you need to call localStorage.clear()

method.

Following is the code which would clear complete local storage:
<!DOCTYPE HTML>
<html>
<body>
  <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>
</body>
</html>

  Modified On Sep-18-2014 01:24:05 PM

Leave Comment