Web storage in JavaScript allows you to store data in the browser. LocalStorage keeps data even after the browser is closed, while SessionStorage keeps data only for the session. Both are key-value storage solutions for client-side data.
This blog explains how to use LocalStorage and SessionStorage with examples.
⭐ 1. LocalStorage vs SessionStorage
| Feature | LocalStorage | SessionStorage |
|---|---|---|
| Storage Limit | ~5MB | ~5MB |
| Lifetime | Permanent (until cleared) | Session (until tab closed) |
| Shared Across Tabs | Yes | No |
| Accessible By JS | Yes | Yes |
⭐ 2. Storing Data
LocalStorage
localStorage.setItem("username", "Sagar");
localStorage.setItem("age", "22");
SessionStorage
sessionStorage.setItem("username", "Sagar");
sessionStorage.setItem("age", "22");
⭐ 3. Retrieving Data
let username = localStorage.getItem("username");
let age = sessionStorage.getItem("age");
console.log(username, age); // Sagar 22
⭐ 4. Removing Data
localStorage.removeItem("age"); // remove a single item
sessionStorage.clear(); // remove all session storage items
⭐ 5. Storing Objects
LocalStorage and SessionStorage store only strings, so objects must be stringified.
let user = { name: "Sagar", age: 22 };
localStorage.setItem("user", JSON.stringify(user));
let retrievedUser = JSON.parse(localStorage.getItem("user"));
console.log(retrievedUser.name); // Sagar
⭐ 6. Practical Example
Save a user preference:
// Save theme
localStorage.setItem("theme", "dark");
// Retrieve theme on page load
let theme = localStorage.getItem("theme");
document.body.className = theme;
⭐ 7. Why Use Web Storage
- Store user preferences without server requests
- Maintain login sessions or temporary data
- Faster than cookies (larger storage, simpler API)
- Works entirely on client-side
⭐ Conclusion
LocalStorage and SessionStorage are simple and powerful ways to store data in the browser. They help improve performance, user experience, and maintain client-side state efficiently.
📌 Citations
🔗 View other articles about Javascript:
https://savanka.com/category/learn/js/
🔗 External Javascript Documentation:
https://www.w3schools.com/js/