Local storage and state management patterns play an important role in building consistent and user-friendly web applications.
Local storage allows applications to store data directly in the browser so that information such as user preferences, settings, or session data persists even after a page refresh.
State management patterns provide structured ways to track and update application data across different components and interactions.
Understanding Local Storage
localStorage provides 5-10MB of client-side storage that persists forever (until cleared), unlike sessionStorage which clears on tab close.
Part of the Web Storage API, it's synchronous, simple, and supported in 99% of browsers including legacy IE9+.
localStorage API Basics
Access data with straightforward key-value methods—no complex setup required.
// Store data
localStorage.setItem('theme', 'dark');
localStorage.setItem('cart', JSON.stringify(['item1', 'item2']));
// Retrieve data
const theme = localStorage.getItem('theme');
const cart = JSON.parse(localStorage.getItem('cart') || '[]');
// Remove data
localStorage.removeItem('theme');
localStorage.clear(); // Clears everythingKey Characteristics
LocalStorage vs. Other Storage Options
Choose the right storage based on persistence and size needs.
Pro Tip: Use try { localStorage.setItem() } catch(e) {} to handle quota exceeded errors gracefully.
State Management Fundamentals
State represents your app's data at any moment—think user inputs, API responses, or UI toggles.
Poor state handling leads to "spaghetti code"; structured patterns keep complexity manageable as apps grow.
What is Application State?
State lives in three layers:
1. Global state: Shared across components (user login, theme)
2. Component state: Local to one UI piece (form input, counter)
3. Server state: Fetched data (products, posts)
Common State Problems
1. Props drilling through 10+ components
2. Inconsistent updates causing bugs
3. No single source of truth
Simple State Patterns for Vanilla JS
Without frameworks, use these scalable approaches.
1. Module Pattern (Singleton State)
const AppState = {
user: null,
theme: 'light',
cart: [],
setUser(user) {
this.user = user;
this.saveToStorage();
this.notifySubscribers();
},
saveToStorage() {
localStorage.setItem('appState', JSON.stringify(this));
}
};2. Publisher-Subscriber Pattern
const StateManager = {
subscribers: [],
state: {},
subscribe(callback) {
this.subscribers.push(callback);
},
update(newState) {
this.state = { ...this.state, ...newState };
this.subscribers.forEach(cb => cb(this.state));
}
};Practical State + localStorage Integration
Combine storage with reactive updates for real apps.
Building a Theme Manager
Create a dark/light mode toggle that persists across sessions.
Step-by-Step Implementation
1. Initialize from storage
const ThemeManager = {
current: localStorage.getItem('theme') || 'light',
init() {
document.body.className = this.current;
this.bindToggle();
},
toggle() {
this.current = this.current === 'light' ? 'dark' : 'light';
document.body.className = this.current;
localStorage.setItem('theme', this.current);
}
};2. Add event binding
ThemeManager.bindToggle = function() {
document.querySelector('.theme-toggle').addEventListener('click', () => this.toggle());
};3. CSS Support
body.light { background: white; color: black; }
body.dark { background: #333; color: white; }Shopping Cart with State Validation
Handle complex objects with error checking.
const CartManager = {
items: JSON.parse(localStorage.getItem('cart') || '[]'),
addItem(product) {
const existing = this.items.find(item => item.id === product.id);
if (existing) {
existing.quantity += 1;
} else {
this.items.push({ ...product, quantity: 1 });
}
this.persist();
},
persist() {
localStorage.setItem('cart', JSON.stringify(this.items));
},
getTotal() {
return this.items.reduce((total, item) => total + (item.price * item.quantity), 0);
}
};Validation Best Practices
1. Parse with fallback: JSON.parse(data || '[]')
2. Validate structure before using
3. Handle quota errors silently
4. Set expiration dates for sensitive data
Advanced Patterns for Scale
As apps grow, adopt these production-ready techniques.
State Slices (Feature-based)
Divide state by domain instead of dumping everything together.
Example
const AuthSlice = {
token: localStorage.getItem('authToken'),
expires: localStorage.getItem('authExpires'),
isValid() {
return this.token && Date.now() < this.expires;
}
};Event-Driven State Updates
Use Custom Events for decoupled components.
// Publisher
function updateCart(newCart) {
localStorage.setItem('cart', JSON.stringify(newCart));
window.dispatchEvent(new CustomEvent('cartUpdated', { detail: newCart }));
}
// Subscriber
window.addEventListener('cartUpdated', (e) => {
updateCartUI(e.detail);
updateBadge(e.detail.length);
});Benefits
1. Components don't know about each other
2. Easy testing (mock events)
3. Framework migration friendly
Performance and Security Best Practices
Optimization Strategies
Security Checklist
1. Never store sensitive data (passwords, tokens)
2. Sanitize user input before storage
3. Use HTTPS only (storage blocked on HTTP)
4. Clear on logout: localStorage.removeItem('user')
Testing Your State Management
Debugging Checklist:
1. Console.log state on changes
2. Test incognito (fresh storage)
3. Simulate quota exceeded
4. Check cross-browser (Safari private mode blocks storage)
Simple Test Suite
// Reset
localStorage.clear();
// Test persistence
localStorage.setItem('test', 'value');
window.location.reload();
console.assert(localStorage.getItem('test') === 'value');