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
Top comments (0)