Explain localStorage, sessionStorage, and IndexedDB. When would you use each?

Explain localStorage, sessionStorage, and IndexedDB. When would you use each?

These are different browser storage mechanisms with varying capabilities and use cases.

localStorage:

// Persistent storage that survives browser restarts
localStorage.setItem('username', 'john_doe');
localStorage.setItem('userPreferences', JSON.stringify({ theme: 'dark', lang: 'en' }));

const username = localStorage.getItem('username');
const preferences = JSON.parse(localStorage.getItem('userPreferences') || '{}');

localStorage.removeItem('username');
localStorage.clear(); // Remove all items

// Storage event (fires on other tabs)
window.addEventListener('storage', (e) => {
  if (e.key === 'username') {
    console.log('Username changed in another tab:', e.newValue);
  }
});

sessionStorage:

// Temporary storage that lasts only for the browser session
sessionStorage.setItem('currentPage', 'dashboard');
sessionStorage.setItem('formData', JSON.stringify({ name: 'John', email: 'john@example.com' }));

const currentPage = sessionStorage.getItem('currentPage');
// Automatically cleared when tab closes

IndexedDB:

// Low-level API for client-side storage of significant amounts of structured data
function openDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('MyDatabase', 1);
    request.onerror = () => reject(request.error);
    request.onsuccess = () => resolve(request.result);
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      if (!db.objectStoreNames.contains('users')) {
        const store = db.createObjectStore('users', { keyPath: 'id' });
        store.createIndex('email', 'email', { unique: true });
      }
    };
  });
}

async function addUser(user) {
  const db = await openDB();
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  return new Promise((resolve, reject) => {
    const request = store.add(user);
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

Comparison: