Sobes.tech
Back to questions
Middle
4

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

Companies where asked
SimbirsoftSimbirsoft

Answer from AI

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.