Back to: HTML Tutorials
Web Storage in HTML with Examples
In this article, I am going to discuss Web Storage in HTML with Examples. Please read our previous article, where we discussed HTML Geolocation and Maps with Examples.
HTML Web Storage
Web applications can store data locally within the browser on the client-side using the Web Storage feature, which works similarly to cookies but is considerably quicker and better. Web storage, on the other hand, is less safe than cookies.
In contrast to cookies, which send data to the server with each request, the information kept in the web storage is not shared with the webserver. Cookies, on the other hand, allow you to store a tiny amount of data, whereas web storage allows you to store up to 5MB of data. On the browser, it saves data in the form of a key/value pair.
There are two forms of online storage, each with its own set of features and lifespan:
- Local Storage: The localStorage object is used to permanently store data for your entire website. This implies that until you delete the saved local data, it will be available the next day, week, or year.
- Session Storage: The sessionStorage object is used to store data for a single browser window or tab on a temporary basis. When a session expires, i.e. when the user closes that browser window or tab, the data is deleted permanently.
The localStorage Object in HTML
The data is stored in the localStorage object with no expiration date. A key/value pair is used to store each item of data. The key identifies the information’s name (for example, ‘name’), and the value is the value associated with that key (for example, ‘Dotnettutorials’).
localStorage.setItem(key, value) assigns a value to a key.
localStorage.getItem(key) returns the value associated with the key.
In the example below we have used localstorage to store the value of name and category.
<!DOCTYPE html>
<html>
<head>
<title>Web Storage API</title>
<style>
body{
font-size: 40px;
font-weight:500;
color:white;
background-color:teal;
Font-family:sans,cursive;
height:100vh;
display:flex;
align-items:center;
flex-direction:column;
}
button{
background-color:white;
padding:10px;
border:none;
margin:35px;}
</style>
</head>
<body>
<div id="output"></div>
<script>
if(typeof(Storage)!=="undefined") {
localStorage.setItem("name","Dotnettutorials");
localStorage.setItem("category", "Local Storage");
document.getElementById('output').innerHTML= "Hello welcome to"+ " "+ localStorage.name +" "+"we are learning about"+" "+localStorage.category;
}
else{
alert("Sorry! your browser is not supporting the browser")
}
</script>
</body>
</html>
Output:
The sessionStorage Object in HTML
The sessionStorage object works similarly to localStorage, with the exception that it only keeps data for one session, i.e. until the user closes that window or tab. In the example below we have used session storage to store values.
<!DOCTYPE html>
<html>
<body>
<script>
if(sessionStorage) {
sessionStorage.setItem("greet", "Welcome");
sessionStorage.setItem("sub", "Html");
alert("Hi, " + sessionStorage.getItem("greet") + " " + "to " + sessionStorage.getItem("sub")+ " Tutorial");
} else {
alert("Sorry, your browser do not support session storage.");
}
</script>
</body>
</html>
Output:
How to Remove Web Storage in HTML?
When we close the browser, the session storage data is automatically deleted, but data saved in local storage remains in the browser even after you close it. We can also delete a specific item from the storage if it exists by calling the removeItem() function with the key name, such as localStorage.removeItem(“name”).
However, if we want to delete all key/value pairs from localStorage in one go, we can use the clear() method. It accepts no arguments and immediately clears all key/value pairs from localStorage. In the example below we have used removeItem() to remove values saved in localstorage.
<!DOCTYPE html>
<html>
<head>
<title>Web Storage API</title>
<style>
body{
font-size: 50px;
font-weight:500;
color:white;
background-color:Mediumseagreen;
Font-family:Arial;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
button{
background-color:white;
padding:10px;
border:none;
margin:35px;}
</style>
</head>
<body>
<div id="output"></div>
<button onclick="remove();">Remove Category</button>
<script>
if(typeof(Storage)!=="undefined") {
localStorage.setItem("name","Dotnettutorials");
localStorage.setItem("category", "Technology");
document.getElementById('output').innerHTML= "Hello welcome to"+ " "+ localStorage.name +" "+"best place to learn about latest"+" "+localStorage.category;
}
else{
alert("Sorry! your browser is not supporting the browser")
}
function remove() {
localStorage.removeItem("category");
document.getElementById('output').innerHTML= "Hello welcome to"+ " "+ localStorage.name +" "+"best place to learn about latest"+" "+localStorage.category;
}
</script>
</body>
</html>
Output:
In the next article, I am going to discuss Server-Sent Events in HTML with Examples. Here, in this article, I try to explain Web Storage in HTML with Examples and I hope you enjoy this Web Storage in HTML with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.