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

// 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);
  }
});

// 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

// 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);
  });
}