HTML 5

HTML5 Web Storage

Web Storage is a 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 exipration 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).
  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>  
Example: Storing and retriving data from Session Storage

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 savethis() 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 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.
  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>  
Working Preview
 
 
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

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