š¾ What is Browser Storage in Web Development?
Browser Storage refers to several built-in mechanisms that allow web applications to store data on the user’s browser, either temporarily or persistently.
š§± Main Types of Browser Storage
Type | Persistence | Size Limit | Accessible From |
---|---|---|---|
Cookies | Optional (can expire) | ~4 KB per cookie | Server + Client |
LocalStorage | Persistent (until cleared) | ~5ā10 MB | Client-side only |
SessionStorage | Until browser/tab is closed | ~5 MB | Client-side only |
IndexedDB | Persistent (structured data) | 50MB+ (varies) | Client-side only |
Cache Storage (Service Workers) | Persistent (cached files) | 50MB+ | For PWAs & offline apps |
šø 1. LocalStorage
Key-value pairs (strings only)
Persistent across tabs and browser sessions
// Save data
localStorage.setItem('theme', 'dark');
// Get data
const theme = localStorage.getItem(‘theme’);
// Remove data
localStorage.removeItem(‘theme’);
ā Use case: Save user preferences, theme, token (NOT sensitive data)
šø 2. SessionStorage
Works like LocalStorage, but clears on tab/browser close
sessionStorage.setItem('cart', 'item123');
ā Use case: Cart state, temporary data during session
šø 3. Cookies
Small pieces of data sent between server and client
Can be made HttpOnly (secure, not accessible via JavaScript)
document.cookie = "username=Anil; path=/; max-age=3600";
ā Use case: Authentication, tracking, server communication
šø 4. IndexedDB
A low-level NoSQL database inside the browser
Stores structured data like JSON, blobs, files
const request = indexedDB.open('MyDatabase', 1);
request.onsuccess = (event) => {
const db = event.target.result;
};
ā Use case: Offline apps, large datasets, PWA storage
šø 5. Cache Storage (Service Workers)
Stores entire responses/files for offline use
Used in Progressive Web Apps (PWAs)
caches.open('my-cache').then(cache => {
cache.add('/index.html');
});
ā Use case: Offline access, caching static assets
š§ When to Use What?
Need | Use This |
---|---|
Persistent small data (theme, token) | localStorage |
Temporary data for one session | sessionStorage |
Server-client data (auth, tracking) | cookies |
Offline/large data | IndexedDB |
Offline static assets | Cache Storage (via Service Worker) |
ā ļø Security Tips
Never store sensitive data (like passwords or tokens) in
localStorage
Use
HttpOnly
cookies for auth tokensAlways sanitize and validate user input before storage