Html5 Web Storage
HTML5 Web storage includes local storage and session storage. Both can store data on client side, same as cookies. But Cookies can store up to 4kb data in string type, whereas HTML5 web storage can store 5mb, (Up to 10mb in some browsers) data in key-value pair. Unlike cookies, they are easy to use, easy to parse have more storage capacities.
Type of web 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 5-10 mb data,( can vary on different browsers) on client side same as cookies. But cookies can store only up to 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
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
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
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 remove session storage, 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
<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. However, you can use cookies as an alternative in older browsers like IE 8 and below.
Conclusion
HTML5 Web Storage APIs, including Local Storage and Session Storage, provide powerful ways to store data on the client-side. Local Storage persists data across browser sessions, while Session Storage is limited to the current tab. Both offer significant advantages over cookies in terms of storage capacity and ease of use. Always check for browser support and handle data securely, avoiding sensitive information storage.