Html5 Web Storage
HTML5 Web storage includes local storage and session storage. Both can store data on client side, same like cookies. But Cookies can store upto 4kb data in string type, whereas HTML5 web storage can store 5mb, (Upto 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 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
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 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
<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.