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.