Local and Session Storage

Updated on 24-Jan-2019

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

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

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

Enter Name: ( 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.

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.

Follow @techaltum