The Web Storage API is a simple, powerful way for websites to store data in a user’s browser. Unlike cookies, Web Storage provides more storage space and does not get sent with every HTTP request. It’s part of HTML5 and supported by all modern browsers.
There are two main types of Web Storage:
- localStorage
- sessionStorage
Let’s explore both in detail, with examples.
1. localStorage vs sessionStorage
- localStorage stores data with no expiration. The data persists even after the browser is closed and reopened.
- sessionStorage stores data for the duration of the page session. The data is lost when the browser tab is closed.
Both use the same methods to store, retrieve, and remove data.
2. Basic Methods
Each storage object provides the following methods:
javascriptCopyEditsetItem(key, value) // Store data
getItem(key) // Retrieve data
removeItem(key) // Remove a specific item
clear() // Remove all items
key(index) // Get the key name by index
length // Number of stored items
3. Using localStorage
javascriptCopyEdit// Store data
localStorage.setItem('username', 'JohnDoe');
// Retrieve data
let user = localStorage.getItem('username');
console.log(user); // Output: JohnDoe
// Remove data
localStorage.removeItem('username');
// Clear all data
localStorage.clear();
You can only store strings, so to store objects or arrays, use JSON.stringify() and JSON.parse():
javascriptCopyEditlet user = { name: 'Alice', age: 25 };
// Store object
localStorage.setItem('user', JSON.stringify(user));
// Retrieve object
let retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser.name); // Output: Alice
4. Using sessionStorage
sessionStorage works exactly the same way as localStorage, except that the data is cleared when the page session ends.
javascriptCopyEditsessionStorage.setItem('theme', 'dark');
let theme = sessionStorage.getItem('theme');
console.log(theme); // Output: dark
If you close the tab and reopen the site, the data will be gone.
5. When to Use Web Storage
- localStorage is ideal for user preferences, dark/light theme settings, or caching infrequently changing data.
- sessionStorage is great for temporary data like form inputs, a user’s quiz answers during a session, or page state.
6. Limitations
- Storage size is limited (about 5–10 MB depending on browser).
- Synchronous API — not ideal for large data or blocking operations.
- Only stores strings, so objects must be serialized.
- Not secure for sensitive data; never store passwords or tokens.
7. Feature Detection
Always check if the browser supports Web Storage:
javascriptCopyEditif (typeof(Storage) !== 'undefined') {
// Safe to use localStorage/sessionStorage
} else {
console.log('Web Storage not supported!');
}
8. Real Example: Dark Mode Toggle
Here’s a quick example of how to use localStorage to remember a dark mode setting:
htmlCopyEdit<button id="toggle">Toggle Theme</button>
<script>
const body = document.body;
const toggle = document.getElementById('toggle');
// Load stored theme
if (localStorage.getItem('theme') === 'dark') {
body.classList.add('dark');
}
toggle.onclick = () => {
body.classList.toggle('dark');
let theme = body.classList.contains('dark') ? 'dark' : 'light';
localStorage.setItem('theme', theme);
};
</script>
<style>
.dark {
background-color: black;
color: white;
}
</style>
Conclusion
The Web Storage API is a valuable tool for frontend developers. It’s simple to use, doesn’t require a server, and is perfect for storing lightweight data in the browser. Whether you’re saving user preferences or caching small datasets, localStorage and sessionStorage can improve performance and user experience.