TinTin

Posted on Feb 19

Everything About Local Storage in JavaScript and React

#javascript #react #localstorage #beginners

Of course, you've read a lot about localStorage and still feel confused? Let's dive deep!

What is localStorage?

LocalStorage is one of the simplest ways to store data in the browser persistently. It saves data as key-value pairs (always string format) and remains even after the user closes, refreshes or reopens the browser.
LocalStorage is a built-in property of the window object, making it globally accessible in the browser.

localStorage vs. sessionStorage vs. cookies

Before diving into localStorage, let’s compare to other storage methods in the browser.
SessionStorage: similar to localStorage but only persists until the tab is closed.
Cookies: store small amounts of data and can be sent with every HTTP request.

Now you understand that LocalStorage is often preferred when dealing with persistent client-side data that does not need to be sent to the server with every request.

How to Use localStorage in JavaScript

localStorage provides a simple API for storing, retrieving, and deleting data.

Storing/Set Data

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

Retrieving/Get Data

const user = localStorage.getItem("username");
console.log(user); // Output: JohnDoe

Removing One Data

localStorage.removeItem("username");

Clearing All Data

localStorage.clear();

Using localStorage in React

When using localStorage in React, we can integrate it with the component state using useEffectand useState. (However, a better approach is to create a custom hook.)

Example: Persisting Theme Preference in React Without Custom Hook

(You can copy the code in your editor and see the result. but first figure it out)

import React, { useState, useEffect } from "react";

function ThemeSwitcher() {
    const [theme, setTheme] = useState(localStorage.getItem("theme") || "light");

    useEffect(() => {
        localStorage.setItem("theme", theme);
    }, [theme]);

    const toggleTheme = () => {
        setTheme(theme === "light" ? "dark" : "light");
    };

    return (
        <div style={{ background: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff", padding: "20px" }}>
            <p>Current Theme: {theme}</p>
            <button onClick={toggleTheme}>Toggle Theme</button>
        </div>
    );
}

export default ThemeSwitcher;

This code saves the theme in localStorage, ensuring that the user's theme preference remains even after refreshing the page.

Why Use localStorage?

localStorage allows us to store data independently from the server, meaning we can keep certain user preferences and information directly in the browser. This helps improve performance and user experience.

Why is this useful?

Faster user experience → No need to send unnecessary requests to the server.
User settings persistence → Like saving dark/light mode, selected language, or shopping cart items.
Reduces server load → Since frequently used data is already stored locally.

For example, imagine an online store where you add products to your cart. With localStorage, even if you close and reopen the browser, your cart items will still be there!

Advantages of localStorage

Persistence: Data remains even after refreshing or reopening the browser.
Simple API: Easy to use with setItem, getItem, and removeItem.
Good for Lightweight Data: Ideal for storing small JSON objects or preferences.
No Network Overhead: Unlike cookies, data isn’t sent with every HTTP request.

Limitations and Security Concerns

Limited Storage: Only ~5MB of data can be stored.
No Expiration: Data remains unless explicitly removed.
Security Risks: Susceptible to XSS attacks if data isn’t handled properly.
Not for Sensitive Data: Never store passwords or personal user data in Local Storage.

Conclusion

localStorage is a powerful tool for maintaining client-side data, especially in JavaScript and React applications. However, it should be used cautiously, considering its security limitations and storage constraints. For more advanced state management and persistence, libraries like Redux Persist or IndexedDB might be better suited.

hey guys, this is my first article on DEV, so I’d love to hear your thoughts and feedback. Let me know if you have any suggestions or questions—I’m here to learn and improve! :))

DEV Community