Перейти на PRO

Как синхронизировать данные между вкладками

Тип вопроса: JavaScript Вероятность: 10% Категория: Frontend Разработчик

Ответ

Для синхронизации данных между вкладками можно использовать несколько подходов:

  1. LocalStorage/SessionStorage + событие storage
    При изменении данных в одной вкладке срабатывает событие storage в других вкладках:
    window.addEventListener('storage', (event) => {
      if (event.key === 'sync-data') {
        console.log('Данные обновлены:', event.newValue);
      }
    });
  1. BroadcastChannel API
    Позволяет напрямую обмениваться сообщениями между вкладками:
    const channel = new BroadcastChannel('data-sync');
    channel.postMessage({ type: 'update', data: newData });
    channel.onmessage = (e) => console.log(e.data);
  1. SharedWorker (для сложных сценариев)
    Общий воркер, который может координировать состояние между вкладками.

Важно:

  • LocalStorage ограничен ~5MB и работает только в рамках одного домена.
  • BroadcastChannel не поддерживается в IE.
  • Для реального времени лучше использовать WebSockets, если нужна синхронизация между устройствами.

Ответ 18+ 🔞

А, слушай, про синхронизацию вкладок! Ну это же классика, блядь, каждый второй проект с этим сталкивается. Сидит пользователь, открыл пять окон, в одном что-то сделал, а в остальных — хуй! Ничего не меняется. И он такой: «Ваш сайт глючит, пидарасы!». А мы-то знаем, в чём собака зарыта, вернее, где она насрала.

Так вот, способов наколдовать синхрон есть несколько, выбирай на вкус и цвет.

Первый, дедовский способ — LocalStorage и событие storage. Представь, это как оставить записку на холодильнике. Одна вкладка её пишет, а другие, блядь, слышат скрип двери и бегут смотреть. Только тут скрип — это событие.

window.addEventListener('storage', (event) => {
  if (event.key === 'sync-data') {
    console.log('Данные обновлены, ёпта:', event.newValue);
    // Тут делаешь что надо с этими новыми данными
  }
});

Сука, просто? Просто. Но есть нюанс, как говорится. Это событие НЕ срабатывает в той же самой вкладке, которая запись сделала. Только в других! И ещё объём — всего-то овердохуища целых 5 мегабайт. Ну и домен должен быть один, ясен пень.

Второй, более прямолинейный — BroadcastChannel API. Это уже как рация. Взял, нажал кнопку — во всех вкладках твоё сообщение услышали. Красота!

// Создаём канал, называем его как душе угодно
const channel = new BroadcastChannel('data-sync');
// Кричим в него
channel.postMessage({ type: 'update', data: newData });

// А в каждой вкладке слушаем, что по нему говорят
channel.onmessage = (e) => {
  console.log('Прилетело по рации:', e.data);
  // Обновляем интерфейс, ёбана!
};

Вот это уже похоже на правду. Но, предупреждаю сразу — Internet Explorer эту рацию в руки не возьмёт. Ему бы патефон. Так что если нужно поддерживать этих пидарасов шерстяных, придётся извращаться.

Третий, для сложных пацанов — SharedWorker. Это уже не просто записка или рация, это типа общего диспетчера нанимаешь. Все вкладки к нему подключаются, а он им состояние раздаёт и синхронизирует. Мощно, но и возни с ним, блядь, побольше. Для простых задач — как из пушки по воробьям.

И главное, что надо держать в башке:

  • LocalStorage — мало места, только один домен, событие только в других вкладках.
  • BroadcastChannel — современно, прямо, но IE сдохнет.
  • Если тебе надо, чтобы данные между разными компами синхронизировались в реальном времени — тут тебе не колхоз, тут нужны WebSockets (или SSE). LocalStorage с BroadcastChannel'ом только в рамках одного браузера на одном компе работают.

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

© ХакСобесов, 2026
support@hacksobesov.com