Обработка событий хранилища между вкладками

Если пользователь открыл приложение в двух вкладках и обновил значение во вкладке A, во вкладке B по-прежнему отображается старое состояние. У каждой вкладки есть собственное состояние React в памяти, хотя localStorage у них общий.

Без согласования вкладки имеют разные представления о текущем значении.

Браузер отправляет событие storage в другие вкладки одного источника при каждом изменении localStorage. Важно, что во вкладке, где произошло изменение, это событие не срабатывает.

Именно этот сигнал нужен вкладке B, чтобы узнать об изменении, выполненном во вкладке A.

Внутри useEffect вызовите window.addEventListener('storage', handler) и верните функцию очистки, которая удаляет обработчик. Так компонент подписывается на изменения между вкладками.

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

Объект события содержит key (какой ключ изменился), oldValue и newValue (строки до и после изменения), а также storageArea (затронутое хранилище).

Ключ null со значениями null означает, что всё хранилище было очищено.

Событие хранилища срабатывает для каждого ключа источника, поэтому обработчик должен проверять event.key === yourKey, прежде чем реагировать. Игнорирование несвязанных ключей предотвращает ненужные повторные рендеринги.

Также обработайте случай, когда event.newValue равен null: это означает, что ключ был удалён.

Получив соответствующее изменение, разберите event.newValue и вызовите функцию установки, чтобы обновить состояние React. Так вторая вкладка синхронизируется с изменением, выполненным в другом месте.

Вместе с хуком useLocalStorage это замыкает цикл синхронизации между вкладками.

BroadcastChannel позволяет вкладкам одного источника напрямую обмениваться сообщениями с помощью postMessage. Это удобнее, чем использовать события хранилища, и работает даже без записи в localStorage.

Создайте канал по имени, отправляйте обновления и прослушивайте события message.

React предоставляет useSyncExternalStore для подписки на внешние хранилища безопасным для конкурентного выполнения способом. Его функцию подписки можно связать с событием storage, а снимок состояния — с чтением localStorage.

Так обновления внешнего хранилища корректно интегрируются с отрисовкой React.

Классический сценарий — выйти из аккаунта везде: когда одна вкладка очищает флаг аутентификации, событие хранилища в других вкладках обнаруживает это и перенаправляет их на экран входа.

Это не позволяет устаревшей вкладке продолжать показывать содержимое для вошедшего пользователя.

Тема — ещё один подходящий пример: переключение тёмного режима в одной вкладке записывает данные в localStorage, событие хранилища срабатывает в остальных, и они мгновенно обновляют состояние темы.

Пользователь видит единообразное оформление независимо от того, на какую вкладку он переключается.

Синхронизация между вкладками сводится к прослушиванию события storage или использованию BroadcastChannel, фильтрации по нужным ключам и обновлению состояния React на основе нового значения.

Для надёжных подписок, безопасных при конкурентном выполнении, современным вариантом является useSyncExternalStore.

Проверьте, насколько хорошо Вы понимаете события между вкладками.

Вы узнали, что событие storage срабатывает в других вкладках, научились прослушивать его, фильтровать события по ключу и обновлять состояние, а также познакомились с альтернативами BroadcastChannel и useSyncExternalStore.

Вы рассмотрели практические сценарии, такие как выход из аккаунта на всех вкладках и синхронизация тёмного режима между вкладками.