When we reload a website, JavaScript variables disappear; that’s because the web is stateless by default so the browser doesn’t remember anything once the page is refreshed. But what if you want your site to remember user preferences, saved items, or a theme choice?

That’s where localStorage comes in.

💡 What Is localStorage?

It is part of the Web Storage API, which lives in the Window object, meaning it’s only available in browser JavaScript (not Node.js).

Key features:

• Data persists even after closing the browser
• Storage limit: around 5–10 MB (varies by browser)
• Accessible only by JavaScript running on the same domain
• Stores data as strings only

🎯 Why Use localStorage?

✔️ It’s great for small, persistent, non-sensitive data such as:

• Theme or layout preferences
• Remembering form inputs or drafts
• Storing app state (like sidebar open/closed)
• Caching API responses temporarily

❌ It’s not meant for:

• Sensitive data (like tokens or passwords)
• Large or complex datasets (use IndexedDB for that)

🛠️ Basic Operations

1. Store Data

localStorage.setItem("name", "Richa");

2. Retrieve Data

const name = localStorage.getItem("name");
console.log(name); // "Richa"

3. Remove a Key

localStorage.removeItem("name");

4. Clear All Data

localStorage.clear();

5. Retrieve the name of a key

let keyName = localStorage.key(0); // Gets the name of the key at index 0
console.log(keyName); // name

Each value is stored as a string. If you try to store an object directly, you’ll just get [object Object].

📥 Storing Objects and Arrays (The Right Way)

Since localStorage only supports strings, you must convert structured data into strings using JSON.stringify() and parse it back with JSON.parse().

const user = { name: "Richa", role: "Developer" };

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

// Retrieve
const data = JSON.parse(localStorage.getItem("user"));
console.log(data.role); // "Developer"

⚙️ Real-World Example: Persistent Theme Switcher

👇Check out mini project that describes the use case of localStorage Persistent Theme Switcher

✅ Try switching themes, reload the page, and see the magic; your preference stays saved!

🆚 Comparison: localStorage vs sessionStorage vs IndexedDB

Feature	localStorage	sessionStorage	IndexedDB
Persistence	Until manually cleared	Until tab closes	Persistent
Data Type	Strings only	Strings only	Objects, Blobs, Files
Size Limit	~5–10 MB	~5 MB	Hundreds of MBs
Use Case	Preferences, small cache	Temporary state	Large structured data
Access Speed	Fast (sync)	Fast (sync)	Slower (async)

🔚 Conclusion

So that’s it for localStorage! It may look simple, but it’s an incredibly useful tool when used wisely. It gives your web app memory, a way to remember who your user is and what they prefer, even after they close the browser.

I hope you found this mini tutorial helpful.

If you enjoyed this post or learned something new, drop a ❤️ and follow me for more beginner-friendly guides on web development.

And if you have any questions or feedback, feel free to reach out on