Sobes.tech
Назад к вопросам
Middle
3

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

Компании, где спрашивали
SimbirsoftSimbirsoft

Ответ от нейросети

sobes.tech AI

Для синхронизации двух вкладок браузера через localStorage используется событие storage. Оно срабатывает в других вкладках, когда в одной вкладке происходит изменение данных в localStorage.

Пример использования:

// В обеих вкладках добавляем обработчик события
window.addEventListener('storage', (event) => {
  if (event.key === 'syncKey') {
    console.log('Данные изменились:', event.newValue);
    // Здесь можно обновить состояние или выполнить нужные действия
  }
});

// В одной из вкладок обновляем localStorage
localStorage.setItem('syncKey', JSON.stringify({ time: Date.now() }));

Особенности:

  • Событие storage не срабатывает в той же вкладке, где произошло изменение, только в остальных.
  • Можно использовать для передачи сообщений между вкладками, обновления UI или синхронизации состояния.
  • Значение event.key — ключ, который изменился.
  • event.newValue и event.oldValue — новые и старые значения.

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