На странице есть плеер. Нужно сделать так, чтобы при нажатии "стоп" на одной вкладке воспроизведение останавливалось и на другой вкладке. Как бы ты реализовал общение между вкладками?

Введение

Когда пользователь открывает несколько вкладок одного сайта, каждая из них работает в изолированном процессе. Чтобы синхронизировать действия, например остановку плеера, нужно использовать механизм межвкладочного общения. Основные варианты: BroadcastChannel, localStorage и postMessage.

BroadcastChannel

BroadcastChannel создает канал, через который можно отправлять сообщения всем вкладкам, подписанным на этот канал. Это современный и удобный способ.

// Вкладка 1: отправка сообщения
const channel = new BroadcastChannel('player');
channel.postMessage({ action: 'stop' });

// Вкладка 2: получение сообщения
const channel = new BroadcastChannel('player');
channel.onmessage = (event) => {
  if (event.data.action === 'stop') {
    player.pause();
  }
};

localStorage и событие storage

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

// Вкладка 1
localStorage.setItem('playerState', 'stopped');

// Вкладка 2
window.addEventListener('storage', (event) => {
  if (event.key === 'playerState' && event.newValue === 'stopped') {
    player.pause();
  }
});

postMessage с window.open

Если вкладки открыты через window.open, можно использовать postMessage для прямого общения между окнами. Но это требует хранения ссылок на окна.

Вывод

Для простой синхронизации между вкладками лучше всего подходит BroadcastChannel — он чистый и не оставляет следов в хранилище. Если нужна поддержка старых браузеров, используйте localStorage. Выбор зависит от целевой аудитории и сложности приложения.