This blog will learn about an advanced feature in HTML5, which is the Web Storage API in HTML5. Have you ever come across a situation where you have a notification popping up to accept the cookies, and you unknowingly have to accept it to proceed reading the webpage? Many times we hesitate to accept those and ignore reading those pages. Well, cookies aren’t harmful, but they are used to send client-related information to the server.
But we have another feature, i.e., Web Storage API in HTML5. This API is better than cookies with enhanced features and is more secure than cookies as it offers the client a more secure method of storing the client’s information, and the data stored is not transferred to the server via HTTP. It’s just kept on the client-side.
Before moving on, it’s advised to have a basic understanding of HTML5 and Javascript.
Why use the Web Storage API?
With the advent of Web Storage API in HTML5, the client’s data storage has become easy and efficient. Earlier, we had to depend on cookies to store the application data and include it in the HTTP server requests. But with the help of Web Storage API protocols and methods can store the client’s data more securely, as all the data is not transferred to the server and the storing capacity is enhanced. Also, there is no need to store information in the HTTP request header.
To know how much data storage capacity has been improved in the Web Storage API, you can follow the below table.
Cookies usually store only kilobytes of data, but Web storage allows the storage of at least 5MB of data.
Opera allows storage of about 5MB in versions 10.5 and above.
Chrome allows storage of about 10MB since version 4.0 and above
Safari allows storage of about 5MB since version 8.0 and above
Firefox allows storage of about 10MB since version 3.5 and above
Edge allows storage of about 10MB since version 8.0 and above
Types of Web Storage Mechanisms
There are 2 types of Web Storage mechanisms available in the Web Storage API in HTML5.
LocalStorage
In this mechanism, data is stored locally in the browser cache, and it will not be deleted even when the browser is closed and reopened. It can store the maximum amount of data and be cleared only through Javascript or from the browser cache itself.
Data is stored in the form of key/value pairs or name/value pairs in the storage, and to retrieve the value stored, we can use the key to access it.
Note: The key/values are stored in the string format. Hence to use them anywhere else, we shouldn’t forget to convert them accordingly.
Let’s look at an example to understand the concept of Local Storage.
Let’s consider a simple case: we have a button on which we can click as many times as we want in one session, and after closing it, the count will start from where we left.
Look at the following Code:
<!DOCTYPE html>
<html>
<head>
<title>WEB STORAGE API EXAMPLE</title>
<script>
// function to increment the Counter
function incrementCounter(){
// check if the web storage is supported by the browser
if(typeof(Storage) !== "undefined"){
// if the click count is not 0
// increment it
if(localStorage.clickcount){
localStorage.clickcount = Number(localStorage.clickcount)+1;
}else{
// otherwise set it to 1
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
}else{
document.getElementById("result").innerHTML = "Bad Luck! Your browser does not support Web storage API"
}
}
</script>
</head>
<body>
<!-- Creating a button object that increments the counter-->
<p><button onclick="incrementCounter()" type="button">Click</button></p>
<!-- seperate div block to display the count-->
<div id = "result"></div>
<p>Click the button few times and keep track
of the number of times you have clicked<br> Now close the browser and start it again</p>
<p> Start clicking the button. The counter would increase from the count where you left it.</p>
</body>
</html>
The output of the code looks like this:
After clicking 4 times
After reloading the page and clicking the button
SessionStorage
In this mechanism, data is stored inside the web cache or wherever the storage is but the only difference from the localStorage is that data will not be stored once the browser is closed.
Continuing with the same example discussed in localStorage, if you click the button, you will see that count gets incremented when you start clicking on it during a particular session, but once the browser is closed and reopened, the counter starts from 1 again.
Sample Code for the same is as follows:
<!DOCTYPE html>
<html>
<head>
<title>WEB STORAGE API EXAMPLE</title>
<script>
// function to increment the Counter
function incrementCounter(){
// check if the web storage is supported by the browser
if(typeof(Storage) !== "undefined"){
// if the click count is not 0
// increment it
if(sessionStorage.clickcount){
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
}else{
// otherwise set it to 1
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s).";
}else{
document.getElementById("result").innerHTML = "Bad Luck! Your browser does not support Web storage API"
}
}
</script>
</head>
<body>
<!-- Creating a button object that increments the counter-->
<p><button onclick="incrementCounter()" type="button">Click</button></p>
<!-- seperate div block to display the count-->
<div id = "result"></div>
<p>Click the button few times and keep track
of the number of times you have clicked<br> Now close the browser and start it again</p>
<p> Start clicking the button. The counter would increase from the count where you left it.</p>
</body>
</html>
The output of the code looks like this:
After clicking 4 times
After reloading the page and clicking the button
Overview of Internal Implementations
There 3 main interfaces present inside the Web Storage API in HTML:
Storage Interface
Window Interface
StorageEvent Interface
The 2 storage mechanisms i.e local storage and session storage are available inside the Window Object. When either of the mechanisms is invoked, an instance of Storage Object is created with the help of which data is sent, deleted, retrieved.
Say 2 tabs have 2 different origins(Two objects have the same origin only when the scheme, hostname, and port all are the same.), then there will be a separate Storage Object created. Hence we can access the stored data using the Storage Object.
Frequently Asked Questions
Question) When to use session storage and local storage?
Answer) Session storage - It is used when there are frequent changes.
Local storage - It is used when there are no long-term changes.
Question) What are Cookies?
Answer) Before HTML5, the only way to store data locally in the browser was by cookies. They are used for targeted ads, preferences, and session management.
Question) Is local storage supported by All browsers?
Answer) Mostly all the browsers support the Web Storage API except the Deno web browser. To check more about browser compatibility, refer here.
Key takeaways
In a nutshell, in this blog, we covered the topic of Web Storage API in HTML in depth. We touched on various topics like what Web Storage API is all about and its types, working, and understood it using a sample code. We also discussed its uses and the list of browsers that support this API.
I hope you all could gain in-depth knowledge about the Web-Storage API in HTML and understand the topic clearly. If you want to learn more exciting stuff, you can enroll in our top-tier courses taught by the best faculty to unleash your learning potential.
117+ registered 