Как синхронизировать две вкладки браузера через localStorage? Расскажи про событие storage.

Как работает синхронизация вкладок через localStorage

localStorage — это механизм хранения данных в браузере, доступный для всех вкладок одного домена. Когда одна вкладка изменяет данные в localStorage, браузер автоматически генерирует событие storage в других вкладках того же источника. Это событие содержит информацию о том, какой ключ был изменен, его старое и новое значения, а также URL страницы, вызвавшей изменение.

Пример реализации

Для синхронизации нужно добавить слушатель события storage на объект window. Внутри обработчика можно обновить интерфейс или выполнить нужные действия. Вот простой пример:

// Вкладка 1: изменение данных
localStorage.setItem('theme', 'dark');

// Вкладка 2: слушатель события
window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    console.log('Тема изменена на:', event.newValue);
    // Обновить интерфейс
    document.body.className = event.newValue;
  }
});

Важные особенности

• Событие storage не срабатывает в той же вкладке, где произошло изменение — только в других.
• Событие содержит поля: key, oldValue, newValue, url, storageArea.
• Изменения должны быть в localStorage, а не в sessionStorage.

Вывод

Использование события storage — простой и эффективный способ синхронизации состояния между вкладками без необходимости в серверной части. Это полезно для обновления темы, настроек или данных в реальном времени в многокладочных приложениях.