Синхронизация данных между вкладками!

Если у пользователя открыто несколько вкладок одного сайта, браузер позволяет им обмениваться сообщениями в пределах одного origin через стандартный BroadcastChannel API.

Создаём канал для обмена событиями:
const channel = new BroadcastChannel("app_sync");

Из одной вкладки отправляем событие в остальные:
channel.postMessage({
type: "LOGOUT"
});

В других вкладках подписываемся на входящие сообщения:
channel.onmessage = (event) => {
console.log(event.data);
};

Практический кейс — одновременный logout во всех вкладках приложения:
channel.onmessage = (event) => {
if (event.data.type === "LOGOUT") {
// Удаляем только auth-данные, без полного clear
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");
location.reload();
}
};

Функция logout в текущей вкладке должна сначала выполнить локальную очистку, а затем уведомить остальные вкладки:
function logout() {
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");

channel.postMessage({ type: "LOGOUT" });
}

Работает нативно, поддерживается современными браузерами, описан в HTML Living Standard.

Почему BroadcastChannel, а не localStorage events: это нативный event-bus без побочных записей в localStorage, не требующий триггерных ключей и дающий более чистую, предсказуемую модель событий.

Code Ready | #практика