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

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.