• HTML5 Tutorial
  • HTML5 New Tags
  • HTML5 Attributes
  • HTML5 Vs HTML4
  • HTML5 Audio and Video.
  • HTML5 Form.
  • HTML5 SVG.
  • HTML5 Canvas.
  • HTML5 Geolocation.
  • Local & Session Storage

Local and Session Storage

Written By: Avinash Malhotra

Updated on 24-Jan-2019

  • ← HTML5 Geolocation
  • Bootstrap →
  1. Home
  2. Web Designing
  3. HTML5
  4. Local & Session Storage

Html5 Web Storage

HTML5 Web storage can store data on client side, same like cookies. But Cookies can store only 4kb data in string type , whereas html5 web storage can store upto 5mb data in key-value pair. Unlike cookies, they are easy to use, have more storage capacities and easy to parse.

local and session storage
Html5 Local and Session Storage

Type of web storage

  • Local Storage
  • Session Storage

Check Web Storage support on browsers.

		
<script>
if(window.localStorage)
{
    alert("Local storage is supported")
}
else
{
    alert("Local storage is not supported")
}
</script>	

Check Web Storage

 


Local Storage

local storage
Html5 Local Storage in browser tab

HTML5 Local Storage can store upto 5 mb data,( can vary on different browsers) on client side same like cookies. But cookies can store only upto 4kb data, and data is stored in string type only. Local storage can store data in key-value pair. Local storage data is easy to parse than cookies.

  • Add Local Storage
  • Check Local Storage
  • Remove Local Storage
  • Local Storage Example

Add Local Storage

To add local storage, localstorage.setItem() method is used with two parameters. First parameter is name, and second method is value. We can also add local storage using localstorage.key=value;. See examples

<script>
    localStorage.name="Tech Altum";
    localStorage.location="Noida";
    localStorage.pincode=201301;
</script>    
<script>
    localStorage.setItem("name","Tech Altum");
    localStorage.setItem("location","Noida");
    localStorage.setItem("pincode",201301);
</script>    

Check Local Storage

To check local storage, use localStorage.getItem() method with one parameter. Or localStorage.key.

<script>
    localStorage.name;          // "Tech Altum";
    localStorage.location;      // "Noida";
    localStorage.pincode;       // 201301;
</script>    
<script>
    localStorage.getItem("name");
    localStorage.getItem("location");
    localStorage.getItem("pincode");
</script>    
<script>
    localStorage.length;        // return total key value pairs 
</script>    

Remove Local Storage

To remove localstorage, use localStorage.removeItem() method is used with one parameter.

removeItem

<script>
    localStorage.removeItem("name");         // remove name
    localStorage.removeItem("location");     // remove location
</script>    

clear()

<script>
    localStorage.clear();       // remove all local storage data
</script>    

Local Storage Example

Check this example to local storage example

( refresh page to check )

Your name is

<script>
    if(window.localStorage){ 
        localStorage.setItem("name","Avinash Malhotra");
        var name=localStorage.getItem("name");
        alert("Your name is " + name)
    }
    else{
        alert("local storage not supported")
    }
</script>			

Session Storage

Session Storage can store data on client side, but only for current session. This means, once you close your web browser tab, all session storage data will be erased. Even for new tab in browser, session storage data is not accessible. Session storage data is also stored in key-valuepair. Refreshing or reloading browser tab cannot remove session data.

Session storage
Html5 Session Storage
  • Add Session Storage
  • Check Session Storage
  • Remove Session Storage
  • Session Storage Example

Add Session Storage

To add session storage, sessionStorage.setItem() method is used with two parameters. First parameter is name, and second method is value. We can also add session storage using sessionStorage.key=value;. See examples

<script>
    sessionStorage.name="Tech Altum";
    sessionStorage.location="Noida";
    sessionStorage.pincode=201301;
</script>    
<script>
    sessionStorage.setItem("name","Tech Altum");
    sessionStorage.setItem("location","Noida");
    sessionStorage.setItem("pincode",201301);
</script>    

Check Session Storage

To check session storage, use sessionStorage.getItem() method with one parameter. Or sessionStorage.key.

<script>
    sessionStorage.name;          // "Tech Altum";
    sessionStorage.location;      // "Noida";
    sessionStorage.pincode;       // 201301;
</script>    
<script>
    sessionStorage.getItem("name");
    sessionStorage.getItem("location");
    sessionStorage.getItem("pincode");
</script>    
<script>
    sessionStorage.length;        // return total key value pairs 
</script>    

Remove Session Storage

To session localstorage, use sessionStorage.removeItem() method is used with one parameter.

removeItem

<script>
    sessionStorage.removeItem("name");         // remove name
    sessionStorage.removeItem("location");     // remove location
</script>    

clear()

<script>
    sessionStorage.clear();       // remove all data from session storage 
</script>    

Session Storage Example

Check this example to session storage example

You can close this tab and open same page in new tab to check new session.


<script>
    if(window.sessionStorage){ 
        sessionStorage.setItem("user","Tech Altum");
        var name=sessionStorage.getItem("user");
        alert("Your name is " + name)
    }
    else{
        alert("session storage not supported")
    }	

Html5 Local and Session Storage are not supported in HTML4 based Browsers. But we can use cookies instead on html4 based browsers like IE 8 and below.


  • ← HTML5 Geolocation
  • Bootstrap →

Follow @techaltum

Site run By
Tech Altum

Follow: @techaltum
Join Classroom Training

Online Enquiry Form