Как реализовать взаимодействие между вкладками браузера для такого сценария?

Для синхронизации двух вкладок браузера через 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.