JavaScript storage event: синхронизация вкладок

Событие storage позволяет вкладке узнать об изменении localStorage, сделанном в другой вкладке того же origin. Это простой способ уведомить соседние вкладки о переключении темы или обновлении некритичного состояния.

Рабочий пример

window.addEventListener('storage', event => {
  if (event.storageArea !== localStorage) return;
  if (event.key === 'theme' && event.newValue) {
    document.documentElement.dataset.theme = event.newValue;
  }
});

// в другой вкладке:
localStorage.setItem('theme', 'dark');

StorageEvent содержит key, oldValue и newValue. Изменение в той же вкладке не вызывает storage event в ней самой.

Частый вопрос

Почему событие не срабатывает в текущей вкладке?

По спецификации оно приходит в другие документы того же origin. Для локального обновления вызовите функцию обновления состояния напрямую.