HTML 5

Web Storage in HTML 5

Introduction
 
Web Storage is one of the great features of HTML5. It enables web applications to store data locally with the user's browser. It is different from the old ways of storage with cookies in many ways. Cookies are included in each HTTP request to the server. That makes the request larger and that can slow down the performance of a web application. Web storage is never transferred to the server. It supports nearly 5 MB of data compared to 4 KB with cookies. The two storages are session storage and local storage.

  • window.localStorage: stores data with no expiration date so the data will persist even if the user closes the tab
  • window.sessionStorage: stores data for the one session and the data would be lost when the user closes the tab
We store the data in web storage as Name/Value pair as in the following:

sessionStorage.setItem("firstname", "Ratnesh");
localStorage.setItem("lastname", "Singh");
or
localStorage.lastname = "Singh";
sessionStorage.firstname= "Ratnesh";

If we need to delete the data form Local storage then we need to use:

localStorage.removeItem("lastname");
or
localStorage.clear();

HTML Code:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script>  
  5. function SetName()  
  6. {  
  7.     if(typeof(Storage) !== "undefined")  
  8.     {  
  9.   
  10.         localStorage.setItem("lastname", "Singh");  
  11.         sessionStorage.setItem("firstname", "Ratnesh");   
  12.           
  13.     }   
  14.       
  15. }  
  16.   
  17. function GetName()  
  18. {  
  19.     if(typeof(Storage) !== "undefined")  
  20.     {  
  21.         document.getElementById("divName").innerHTML = sessionStorage.getItem("firstname")+' ' +localStorage.getItem("lastname");  
  22.                   
  23.     }   
  24.       
  25. }  
  26.   
  27. function RemoveName()  
  28. {  
  29.     if(typeof(Storage) !== "undefined")  
  30.     {  
  31.         localStorage.clear();  
  32.         //localStorage.removeItem("lastname");  
  33.           
  34.     }     
  35. }  
  36.   
  37. </script>  
  38. </head>  
  39. <body>  
  40. <p><button onclick="SetName()" type="button">Set Name</button>  
  41.    <button onclick="GetName()" type="button">GetName</button>  
  42.    <button onclick="RemoveName()" type="button">Remove Name</button></p>  
  43.   
  44.    <div id="divName"></div>  
  45.   
  46. </body>  
  47. </html>  
Here we have used “if(typeof(Storage) !== "undefined")” to check whether the browser supports the web storage or not.

To show the difference between sessionStorage and webStorage I have created a separate page with two buttons. On the click of “Click me!”, I am increasing the hit count by one and storing this number to each types of storage.

I have opened three instance of the page in the browser. I clicked the “Click me!” button thrice on each page. Then I clicked “Refresh” on each page. In the screen grab we can see that session hits count is three for each instance and the total hits is 9. So we can see that localStorage is common for all but sessionStorage is independent of each other.



HTML file
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script>  
  5. function Counter()  
  6. {  
  7.     if(typeof(Storage) !== "undefined")  
  8.     {         
  9.         if (localStorage.clickcount)   
  10.         {  
  11.             localStorage.clickcount = Number(localStorage.clickcount)+1;  
  12.         }   
  13.         else   
  14.         {  
  15.             localStorage.clickcount = 1;  
  16.         }  
  17.         if (sessionStorage.clickcount)   
  18.         {  
  19.             sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;  
  20.         }   
  21.         else   
  22.         {  
  23.             sessionStorage.clickcount = 1;  
  24.         }  
  25.         document.getElementById("divLocalStorageResult").innerHTML = "Total hits in all session :" + localStorage.clickcount ;  
  26.         document.getElementById("divSessionStorageResult").innerHTML = "Hits in Current session :" + sessionStorage.clickcount ;  
  27.   
  28.         }     
  29.    }  
  30.    function GetCounter()  
  31.    {  
  32.       if(typeof(Storage) !== "undefined")  
  33.       {     
  34.           
  35.          document.getElementById("divLocalStorageResult").innerHTML = "Total hits in all session :" + localStorage.clickcount ;  
  36.         document.getElementById("divSessionStorageResult").innerHTML = "Hits in Current session :" + sessionStorage.clickcount ;  
  37.       }   
  38.    }  
  39. </script>  
  40. </head>  
  41. <body>  
  42.    <p>  
  43.       <button onclick="Counter()" type="button">Click me!</button>   
  44.       <button onclick="GetCounter()" type="button">Refresh</button>  
  45.    </p>  
  46.   
  47.    <div id="divLocalStorageResult"></div>  
  48.    <div id="divSessionStorageResult"></div>  
  49.   
  50. </body>  
  51. </html>  

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs