HTML5 Webstorage

HTML5 has introduced two storage mechanisms

1. Session storage
2. Local storage

Both the storages are used for storing structured data on the client side for handling different situations.

Drawbacks overcome by using these storage mechanisms

1. Slowing down of the web application due to transmission of same data that is produced with inclusion of a cookie whenever a HTTP is requested

2. Unencrypted data is sent over the Internet where a cookie is requested whenever a HTTP is requested.

3. Enough data cannot be stored in cookie as its size is only 4KB. These mechanisms help in dealing with this!

Session storage

A session storage is created for a situation where if a user wants to carry out a single transaction but unknowingly carries out multiple transactions in different windows at the same time.
This attribute is used by the sites for adding data to the session storage.
It is accessible to any page from the same site opened in that window i.e. session. As soon as the window is closed, the session will be lost.

Example : Setting up and accessing a session 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 number of hits :" + sessionStorage.hits );
          </script>
     </body>
</html>

Output:
Total number of hits :2

Note: In the above program the number of hits will increase everytime you visit the page or refresh the page.

Local storage

The local storage is designed for storage that span across multiple windows.
They last beyond the current sessions.
There are various web applications which may want to store megabytes of user data on the client side for performance reasons.
Cookies cannot handle this as they are transmitted with every request.

Example : Local storage

Setting up a local storage variable and accessing it every time the page is accessed (even if it is the next time 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 number of hits :" + localStorage.hits );
     </script>
     </body>
</html>

Output:
Total number of hits :4

Note: In the above program the number of hits will increase everytime you visit the page or refresh the page.

Deleting the web storage

The storage of sensitive data on local machines could be very dangerous. The session storage data is automatically deleted by the browsers immediately on the termination of the session.

For clearing local storage localStorage.remove('key'); is called.

key

If all the settings are to be cleared then the localStorage.clear() method is used.

Example : Clearing the 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 number of hits :" + localStorage.hits );
     </script>
     </body>
</html>

Output:
Total number of hits :1

Note: In the above program, the total number of hits will not increase. It will remain the same even if the page is refreshed.