JavaScript Local Storage: A Simple Guide for Beginners

Local Storage is a browser feature that allows you to store data on a user’s device. The data remains saved even after the browser is closed or the page is refreshed.

For example, you can use Local Storage to save:

• User preferences
• Theme settings (dark or light mode)
• Shopping cart data
• Form data
• Simple application settings

Local Storage stores data as key-value pairs, and its values are always stored as strings.

1. How to Store Data in Local Storage

You can use the localStorage.setItem() method to save data in the browser.

localStorage.setItem("username", "Harshit");

Here:

• username is the key.
• Harshit is the value.

The browser saves this data for later use on the same website origin.

2. How to Get Data from Local Storage

Use localStorage.getItem() to retrieve stored data.

const username = localStorage.getItem("username");

console.log(username);

Output:

Harshit

If the key does not exist, getItem() returns null.

3. How to Remove Data from Local Storage

Use localStorage.removeItem() to delete a specific item.

localStorage.removeItem("username");

This removes only the item associated with the username key.

4. How to Clear All Local Storage Data

Use localStorage.clear() to remove all Local Storage entries for the current website origin.

localStorage.clear();

Note: This removes all Local Storage entries for that origin, including entries created by other parts of your application.

5. Store Objects in Local Storage

Local Storage only stores strings. To save a JavaScript object, convert it into a JSON string using JSON.stringify().

const user = {
    name: "Harshit",
    age: 30,
    role: "Developer"
};

localStorage.setItem("user", JSON.stringify(user));

To retrieve the object, use JSON.parse().

const savedUser = JSON.parse(
    localStorage.getItem("user")
);

console.log(savedUser.name);

Output:

Harshit

This technique is useful when storing simple application settings or other non-sensitive data.

6. Practical Example: Save and Display a Username

Let’s create a simple example where a user enters their name and saves it in Local Storage.

<input type="text" id="username" placeholder="Enter your name">

<button onclick="saveName()">Save Name</button>

<p id="result"></p>

<script>
    function saveName() {
        const name = document.getElementById("username").value;

        localStorage.setItem("username", name);

        document.getElementById("result").textContent =
            "Hello, " + name;
    }

    window.addEventListener("DOMContentLoaded", function () {
        const name = localStorage.getItem("username");

        if (name) {
            document.getElementById("result").textContent =
                "Hello, " + name;
        }
    });
</script>

How This Example Works

1. The user enters their name.
2. The saveName() function stores the name in Local Storage.
3. The name appears on the page.
4. When the page is refreshed, the saved name appears again.

You can run this example in an HTML file using your browser.

7. Local Storage vs Session Storage

Feature	Local Storage	Session Storage
Data lifetime	Persists until removed	Usually lasts for the current tab session
Survives page refresh	Yes	Yes
Shared across tabs	Same-origin storage is shared	Separate for each tab’s session
Storage format	Strings	Strings

Choose Local Storage for preferences that should persist. Choose Session Storage for temporary data needed only during a tab session.

8. Important Things to Remember

• Local Storage stores values as strings.
• Data is associated with the website’s origin.
• Local Storage is synchronous, so avoid storing large amounts of data.
• Users can clear stored data from their browser.
• Do not store passwords, authentication secrets, or sensitive personal information in Local Storage.
• Handle missing or invalid JSON data when reading stored objects.

Frequently Asked Questions

Does Local Storage remain after closing the browser?

Yes. Local Storage generally remains available after the browser closes and reopens, unless the data is cleared or browser policies remove it.

How much data can Local Storage store?

The available quota depends on the browser. A few megabytes per origin is common, but the exact limit varies.

Can JavaScript access Local Storage?

Yes. JavaScript can read and modify Local Storage for its own website origin, subject to browser security rules.

Is Local Storage secure?

Local Storage is not suitable for sensitive data. JavaScript running on the same origin can access it, so a cross-site scripting (XSS) vulnerability can expose its contents.

Conclusion

JavaScript Local Storage is a simple way to save small amounts of data in the browser. You can use setItem() to store data, getItem() to retrieve it, removeItem() to delete one item, and clear() to remove all entries for the current origin.

Practice these methods to understand how browser storage works and how to use it in your JavaScript projects.