JavaScript

How to store and retrieve data in the browser

Web browsers can utilize web storage to store and retrieve data locally. Storing data in the web browser is more secure and it also enhances the performance of the website. Unlike cookies, the web storage is much higher, and data is not transferred to the server. Web storage is based on the protocol and domain, and all pages from a single source can store and retrieve the same information.

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:

if (typeof(Storage) !== "undefined") {

  // 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:

<!DOCTYPE html>

<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:

  document.getElementById("sample").innerHTML = localStorage.getItem("name");

} else {

  document.getElementById("name").innerHTML = "Browser not supported";

}

</script>

</body>

</html>

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:

<!DOCTYPE html>

<html>

<body>

<div id="sample"></div>

<script>

if (typeof(Storage) !== "undefined") {

  localStorage.name = "Paul";

document.getElementById("sample").innerHTML = localStorage.name;

} else {

  document.getElementById("name").innerHTML = "Browser not supported";

}

</script>


</body>

</h

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:

localStorage.removeItem("name");

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:

<!DOCTYPE html>

<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:

<!DOCTYPE html>

<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.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.