This write-up will discuss the procedure for storing and retrieving data in the browser. Moreover, examples related to the usage of localStorage and sessionStorage HTML web objects will be provided. So, let’s start!
Web Storage Objects in the browser
Two web storage objects are provided by the HTML, which you can use for storing and fetching the data. “localStorage” is a type of HTML storage that does not have an expiration date, whereas the “sessionStorage” object only store the information related to a single session, which means closing the current browser tab will remove all of the saved data.
Before using localStorage and sessionStorage make sure that HTML web storage is supported by your browser:
// Write out code for HTML storage objects
} else {
// your browser is not supported
}
localStorage HTML Web Storage Object in the browser
As mentioned earlier, the data stored within the localStorage object has no expiration date, and it is not deleted even if your browser is closed. The stored data can be retrieved the next day, week, or year.
Example 1: Using localStorage HTML Web Storage Object in the browser
In the below-given example, we will create a “localStorage” web object having a “name: value” pair:
<html>
<body>
<div id="sample"></div>
<script>
if (typeof(Storage) !== "undefined") {
[/cce_javascript]
The “<strong>setItem()</strong>” method of the “<strong>localStorage</strong>” object is used for storing data:
[cce_javascript width="100%" height="100%" escaped="true" theme="blackboard" nowrap="0"]localStorage.setItem("name", "Paul");
Now, to retrieve the “value” of “name”, we will invoke the localStorage “getItem()” method:
Execute the above-given program in your favorite code editor or any online coding sandbox; however, we will utilize the JSBin for this purpose:
As you can see from the output, we have successfully stored and retrieved data using the “localStorage” HTML web object:
You can also execute the following code for the same purpose:
The provided example will also show you the same output:
If you want to remove an item or entry from your localStorage object, then you have to call the “removeItem()” method and pass the “name” item as an argument:
Example 2: Using localStorage HTML Web Storage Object in the browser
Let’s check out other example. In the below-given JavaScript program the “localStorage” object will count and store the number of times a user clicked the “Click” button:
<html>
<head>
<script>
function buttonClickCounter() {
if (typeof(Storage) !== "undefined") {
if (localStorage.buttonClickCount) {
localStorage.buttonClickCount = Number(localStorage.buttonClickCount)+1;
} else {
localStorage.buttonClickCount = 1;
}
document.getElementById("sample").innerHTML = "Button is clicked " + localStorage.buttonClickCount + " times.";
} else {
document.getElementById("sample").innerHTML = "Browser not supported";
}
}
</script>
</head>
<body>
<p><button onclick="buttonClickCounter()" type="button">Click</button></p>
<div id="sample"></div>
<p>Click the button to check the counter value.</p>
</body>
</html>
Here, the output is showing a “Click” button; click on it to check the buttonClickCounter value:
Initially, the value of buttonClickCounter was set to “0,” and it will be incremented whenever we will click the button:
sessionStorage HTML Web Storage Object in the browser
The HTML “sessionStorage” object works the same as “localStorage“; however, you can only use it for storing and retrieving data for the current session. As soon as the opened browser tab is closed, all of the stored data will be deleted.
Example 2: Using sessionStorage HTML Web Storage Object in the browser
The following JavaScript program will store and retrieve the “buttonClickCount” for the current session. The buttonClickCount is added to count the number of times a user clicked the provided button:
<html>
<head>
<script>
function buttonClickCounter() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.buttonClickCount) {
sessionStorage.buttonClickCount = Number(sessionStorage.buttonClickCount)+1;
} else {
sessionStorage.buttonClickCount = 1;
}
document.getElementById("sample").innerHTML = "In this session, you have clicked the button " + sessionStorage.buttonClickCount + " times";
} else {
document.getElementById("sample").innerHTML = "Browser not supported";
}
}
</script>
</head>
<body>
<p><button onclick="buttonClickCounter()" type="button">Click</button></p>
<div id="sample"><div>
<p>Click the button to check the counter value.</p>
</body>
</html>
Hitting the highlighted button is retrieving the data stored in the “sessionStorage” button:
Conclusion
Developers can utilize localStorage and sessionStorage HTML web objects to store and retrieve data in the browser. localStorage object does not have an expiration date, whereas sessionStorage only stores the information related to a single session, which means closing the current browser tab will remove all of the saved data. This write-up discussed the procedure for storing and retrieving data in the browser. Moreover, examples related to localStorage and sessionStorage HTML web objects usage are also provided.
