localStorage vs sessionStorage vs IndexedDB — When to Use Which
Browser storage has three main options. Most developers know localStorage, fewer know when to use the others.
localStorage
Persistent, synchronous, 5–10MB limit, strings only.
// Store localStorage.setItem('theme', 'dark'); localStorage.setItem('history', JSON.stringify(items)); // Read const theme = localStorage.getItem('theme'); const history = JSON.parse(localStorage.getItem('history') ?? '[]'); // Delete localStorage.removeItem('theme'); localStorage.clear(); Use when: Preferences, settings, small persistent state. Don't use for large data — synchronous reads block the main thread.
sessionStorage
Same API as localStorage, but cleared when the tab closes.
sessionStorage.setItem('draft', content); Use when: Temporary state within a session — unsaved form data, wizard progress, undo history.
IndexedDB
Asynchronous, large storage (usually 50%+ of disk), supports structured data and binary.
async function openDb() { return new Promise((resolve, reject) => { const req = indexedDB.open('my-app', 1); req.onupgradeneeded = (e) => { e.target.result.createObjectStore('files', { keyPath: 'id' }); }; req.onsuccess = (e) => resolve(e.target.result); req.onerror = () => reject(req.error); }); } async function saveFile(db, file) { const buffer = await file.arrayBuffer(); return new Promise((resolve) => { const tx = db.transaction('files', 'readwrite'); tx.objectStore('files').put({ id: file.name, data: buffer, type: file.type }); tx.oncomplete = resolve; }); } Use when: Storing files, large datasets, offline-first apps.
Decision Table
| Need | Use |
|---|---|
| Save theme/language preference | localStorage |
| Remember last-used tool | localStorage |
| Undo history (current session) | sessionStorage |
| Store uploaded file temporarily | sessionStorage or IndexedDB |
| Cache files for offline use | IndexedDB |
| Store processed output | IndexedDB |
| Anything >5MB | IndexedDB |
What I Use in ToolZip
- localStorage: Recent UTM links (8 entries), recently used colors, calculator history
- sessionStorage: Nothing — tools are stateless by design
- IndexedDB: Not yet — may add for caching processed results
The design choice: no file ever touches the server, so browser storage is the only persistence layer.
All tools at toolzip.app run entirely in your browser.