Problem Statement
What is localStorage in JavaScript?
Explanation
LocalStorage is a web storage API that stores key-value pairs in the browser. Data persists even after closing the browser.
Data is stored as strings. Use JSON.stringify to store objects and JSON.parse to retrieve them.
Storage limit is about 5 to 10 MB depending on browser. Data is accessible only to the same origin.
LocalStorage is synchronous and blocks the main thread. SessionStorage is similar but clears on browser close.
Use localStorage for user preferences, settings, and non-sensitive data. Never store sensitive information like passwords.
Understanding browser storage is essential for creating stateful web applications.
Code Solution
SolutionRead Only
// SET ITEM
localStorage.setItem('username', 'John');
localStorage.setItem('theme', 'dark');
// GET ITEM
const username = localStorage.getItem('username');
console.log(username); // 'John'
const theme = localStorage.getItem('theme');
console.log(theme); // 'dark'
// Non-existent key returns null
const missing = localStorage.getItem('missing');
console.log(missing); // null
// REMOVE ITEM
localStorage.removeItem('username');
// CLEAR ALL
localStorage.clear(); // Removes everything
// STORE OBJECTS (must stringify)
const user = {
name: 'John',
age: 30,
preferences: { theme: 'dark' }
};
// Store
localStorage.setItem('user', JSON.stringify(user));
// Retrieve
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 'John'
// STORE ARRAY
const items = ['apple', 'banana', 'orange'];
localStorage.setItem('items', JSON.stringify(items));
const retrievedItems = JSON.parse(localStorage.getItem('items'));
console.log(retrievedItems); // ['apple', 'banana', 'orange']
// CHECK IF KEY EXISTS
if (localStorage.getItem('username') !== null) {
console.log('Username exists');
}
// GET ALL KEYS
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
console.log(key, localStorage.getItem(key));
}
// HELPER FUNCTIONS
// Safe get with default
function getFromStorage(key, defaultValue = null) {
const value = localStorage.getItem(key);
if (value === null) return defaultValue;
try {
return JSON.parse(value);
} catch {
return value;
}
}
// Safe set
function setInStorage(key, value) {
try {
localStorage.setItem(key, JSON.stringify(value));
return true;
} catch (error) {
console.error('Storage error:', error);
return false;
}
}
// PRACTICAL EXAMPLES
// Dark mode toggle
const toggleBtn = document.getElementById('themeToggle');
// Load saved theme
const savedTheme = localStorage.getItem('theme') || 'light';
document.body.classList.add(savedTheme);
toggleBtn.addEventListener('click', () => {
document.body.classList.toggle('dark');
const newTheme = document.body.classList.contains('dark') ? 'dark' : 'light';
localStorage.setItem('theme', newTheme);
});
// Save form progress
const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input, textarea');
// Save on input
inputs.forEach(input => {
// Load saved value
const saved = localStorage.getItem(input.name);
if (saved) input.value = saved;
// Save on change
input.addEventListener('input', () => {
localStorage.setItem(input.name, input.value);
});
});
// Clear on submit
form.addEventListener('submit', () => {
inputs.forEach(input => {
localStorage.removeItem(input.name);
});
});
// Shopping cart
function addToCart(item) {
const cart = JSON.parse(localStorage.getItem('cart')) || [];
cart.push(item);
localStorage.setItem('cart', JSON.stringify(cart));
}
function getCart() {
return JSON.parse(localStorage.getItem('cart')) || [];
}
function clearCart() {
localStorage.removeItem('cart');
}
// STORAGE EVENT (listen for changes in other tabs)
window.addEventListener('storage', (event) => {
console.log('Storage changed!');
console.log('Key:', event.key);
console.log('Old value:', event.oldValue);
console.log('New value:', event.newValue);
console.log('URL:', event.url);
});
// SESSION STORAGE (clears on browser close)
sessionStorage.setItem('sessionData', 'value');
const sessionData = sessionStorage.getItem('sessionData');
// STORAGE LIMITS
try {
// Test storage limit
const testKey = 'test';
const testValue = 'x'.repeat(10 * 1024 * 1024); // 10MB
localStorage.setItem(testKey, testValue);
} catch (error) {
console.error('Storage quota exceeded');
}