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