Post
Ask Question

HTML5 Web Storage

Introduction

 
Web Storage is client-side storage. It allows users to persist data in the form of key/value pairs. Before it, Web Developers used cookies for storing objects/data locally in the user's or client's machine. Web Storage is much similar to cookies but we can store a greater amount of data using web storage and it is very secure.
 
Disadvantages of Cookies
  1. We can store 4KB of data in cookies whereas using Web Storage, we can store up to 5MB of data.
  2. Cookies are sent along with every HTTP request hence it slows down web applications.
  3. Cookies are included with every HTTP request (unencrypted) hence Cookies are less secure whereas data in Web Storage is stored in the client's browser.
Web Storage is supported in these browsers:
  1. Chrome 5+
  2. Firefox 3.6+
  3. Internet Explorer 8+
  4. and so on
We can also check browser support using:
  1. if(typeof(Storage)!=="undefined")    
  2. {    
  3.     alert("Your browser supports HTML5 Web Storage");    
  4. }    
  5. else    
  6. {    
  7.     alert("Your browser does not supports HTML5 Web Storage");    
  8. }  
     
 
 
 
One of the Important points is that Web Storage is browser-specific. Let's understand that with an example. Suppose the user visits your site using Chrome, then any data that was stored to Chrome's Web Storage Store is available with the Chrome browser but not with other browsers. If the user revisits your site with a different browser, then the data saved within Chrome's Web Storage is unavailable in the other browser. So, Web storage is browser-specific and each browser's storage is separate and independent.
 
Types of Web Storage
 
There are the following two types of HTML5 Web Storage:
  1. Local Storage
  2. Session Storage
A Local Storage object stores the data with no expiration date; that means the stored data will not be deleted even after the browser is closed. A session storage object is very similar to Local Storage. The only difference between Session Storage and Local Storage is that Session Storage data is deleted when the browser is closed by the user.
 
Some Common method and properties for local and session storage are
 
 
Example: Storing and retrieving data from Local Storage
 
 
First, we need to check whether the browser supports Web Storage or not. If it is supported than we call the setItem method of localStorage and the key/value pair. Then we retrieve the value from localStorage using the getItem method and display it in div (output).
    Example: Storing and retrieving data from Session Storage
    1. <!DOCTYPE html>    
    2. <html>  
    3.    <head>  
    4.       <title>Local Storage Example</title>  
    5.    </head>  
    6.    <body>  
    7.       <div id="output"></div>  
    8.       <script>    
    9.          if(typeof(Storage)!=="undefined")    
    10.          {    
    11.              localStorage.setItem("Name","Anoop Sharma");    
    12.              document.getElementById("output").innerHTML=localStorage.getItem("Name");    
    13.          }    
    14.          else    
    15.          {    
    16.              document.getElementById("output").innerHTML="Your Browser does not Support HTML5 Web Storage";    
    17.          }    
    18.       </script>    
    19.    </body>  
    20. </html> 
       
    Everything in the following is similar to the previous example exceot the localStorage object must use a sessionStorage object.
    1. <!DOCTYPE html>    
    2. <html>    
    3.     <head>    
    4.         <title>Session Storage Example</title>    
    5.     </head>    
    6.     <body>    
    7.         <div id="output"></div>    
    8.         <script>    
    9.             if(typeof(Storage)!=="undefined")    
    10.             {    
    11.                 sessionStorage.setItem("Name","Anoop Sharma");    
    12.                 document.getElementById("output").innerHTML=sessionStorage.getItem("Name");    
    13.             }    
    14.             else    
    15.             {    
    16.                 document.getElementById("output").innerHTML="Your Browser does not Support HTML5 Web Storage";    
    17.             }    
    18.         </script>    
    19.     </body>    
    20. </html>   
       
      Example: Showing the use of various properties and methods like length, setItem, getItem, clear and so on in a localStorage type of Web Storage
      1. In this example, we have taken two divs with id (box1 and box2). box1 contains textboxes and buttons whereas box2 is used for displaying the data from localStorage.
      2. Windows.addEventlistener calls the displaythis() function on loading the window/page.
      3. The save this() function saves the data from the TextBox to the local Storage then displays the data on div (#box2) by calling the displaythis() function.
      4. The displaythis() function runs a loop starting from i=0 to i<localStorage.length (that returns the number of key/value pairs in local storage).
      5. Get the keys using localStorage.key(i) that retrieves the key at a specific index (in other words i) and use this value for getting the value using the .getItem method.
      6. After getting both of the key/value pairs to display it in a div (with id box2).
      7. For clearing the data from localStorage we use the clearthis() fuction in the onclick event of the clear button.
        Working Preview
        1. <!DOCTYPE html>    
        2. <html>    
        3.     <head>    
        4.         <title>Local Storage Example</title>    
        5.         <style>    
        6.         #box1{    
        7.         float:left;    
        8.         padding:16px;    
        9.         border:1px dashed black;    
        10.         margin-left:20px;    
        11.         }    
        12.         #box2{    
        13.         float:left;    
        14.         padding:16px;    
        15.         border:1px dashed green;    
        16.         width:300px;    
        17.         margin-left:20px;    
        18.         }    
        19.         </style>    
        20.         <script>    
        21.         //display method for displaying data on window load and after saving    
        22.         function displaythis()    
        23.         {    
        24.             var box2=document.getElementById("box2");    
        25.             box2.innerHTML="";    
        26.             for(var i=0;i<localStorage.length;i++)    
        27.             {    
        28.                 var keyval=localStorage.key(i);    
        29.                 var itemval=localStorage.getItem(keyval);    
        30.                 document.getElementById("box2").innerHTML+="Key="+keyval+" Value="+itemval+"<br>";    
        31.             }    
        32.         }    
        33.         //Save data to localStorage method    
        34.         function savethis(){    
        35.             var txtbox1=document.getElementById("textbox1").value;    
        36.             var txtbox2=document.getElementById("textbox2").value;    
        37.             localStorage.setItem(txtbox1,txtbox2);    
        38.             alert("Record Added!");    
        39.             displaythis();    
        40.             document.getElementById("textbox1").value="";    
        41.             document.getElementById("textbox2").value="";    
        42.         }    
        43.         //for Clearing the data from localStorage    
        44.         function clearthis(){    
        45.             localStorage.clear();    
        46.             displaythis();    
        47.         }    
        48.         //call displaythis method on window load    
        49.         window.addEventListener("load",displaythis,false);    
        50.             
        51.         </script>    
        52.     </head>    
        53.     <body>    
        54.         <div id="box1">    
        55.             <p>Key:  <input type="text" id="textbox1"></p>    
        56.             <p>Value:<input type="text" id="textbox2"></p>    
        57.                       <input type="button" id="button" value="Save" onclick="savethis();"><input     
        58.     
        59. type="button" id="button" value="Clear" onclick="clearthis();">    
        60.         </div>    
        61.         <div id="box2">No Data Stored</div>    
        62.         <script>    
        63.                 
        64.         </script>    
        65.     </body>    
        66. </html>   
           
         
         
        Viewing Web Storage data using Web inspector
         
        1. Right-click in the body of the Web Page and then click on Inspect Element. (You can also get the same from "Tools" -> "Developer Tools".)
         
         
        2. Then click on the resource tab, than click on Local Storage.
         
         
        Now you are able to see the data (key/value pairs) that we have added recently. If you double-click on the value in the Web Inspector then you find that you can actually modify the value stored there.
         
        I hope you like it. Thanks


        Similar Articles