localStorage in browsers

#localstorage #webstorage #javascript

Introduction

localStorage is a type of web storage that allows JavaScript sites and apps to store and access data right in the browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed.

How to use localStorage

localStorage is a simple key-value store that can be used to store data in the browser. It is supported by all modern browsers and can be accessed using the localStorage object.

Here is an example of how to use localStorage to store and retrieve data:

// Store data in localStorage
localStorage.setItem("name", "John Doe");

// Retrieve data from localStorage
const name = localStorage.getItem("name");

console.log(name); // Output: John Doe

// Remove data from localStorage
localStorage.removeItem("name");

// Clear all data from localStorage
localStorage.clear();

Let's see it in action

To see localStorage in action, let's create a simple web page that stores and retrieves data using localStorage.

<body>
  <h1>localStorage Example</h1>

  <input type="text" id="name" placeholder="Enter your name" />
  <button onclick="storeData()">Store Data</button>
  <button onclick="retrieveData()">Retrieve Data</button>
  <button onclick="removeItem()">Remove Data</button>

  <script>
    function storeData() {
      const name = document.getElementById("name").value;
      localStorage.setItem("name", name);
    }

    function retrieveData() {
      const name = localStorage.getItem("name");
      alert("Hello, " + name);
    }

    function removeItem() {
      localStorage.removeItem("name");
      alert("Data removed from localStorage");
    }
  </script>
</body>

Implemented Example

In this example, we have created a simple web page with an input field to enter a name and two buttons to store and retrieve the name using localStorage.

See localStorage in browser DevTools

You can also see the data stored in localStorage using the browser DevTools. Here's how you can do it:

Open the browser DevTools by either pressing F12 or right-clicking on the page and selecting "Inspect".
Go to the "Application" or "Storage" tab in the DevTools.
In the "Storage" section, you will see "Local Storage" on the left-hand side. Click on it and select the domain/URL you wish to view the data stored in localStorage for.
You should see the data stored in localStorage, including the key-value pairs that you have set.

Pros and Cons of localStorage

| Pros | Cons | | --- | --- | | Persistence — Data stored in localStorage persists after the browser window is closed. Ideal for user preferences, session data, and other cross-session information. | Security — Data is not encrypted and can be read by anyone with browser access. Do not store passwords, payment details, or other sensitive data. | | Simple API — Straightforward key-value setItem, getItem, and removeItem methods with a low learning curve. | No expiration — Entries persist until explicitly removed, which can lead to stale data or storage bloat without cleanup. | | Large capacity — Typically ~5–10 MB per origin, far more than cookies for client-side storage needs. | Same-origin only — Data is scoped to protocol, domain, and port; not shared across origins or subdomains by default. |

Conclusion

localStorage is a powerful feature that allows web developers to store data in the browser without any expiration date. It can be used to store user preferences, session data, and other information that needs to persist across browser sessions.

I hope this article has helped you understand how localStorage works and how you can use it in your web applications. If you have any questions or feedback, feel free to leave a comment below.

Originally published at https://hemantsharma.tech/blog/4.