Vue-FAQ

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

Во Vue можно даже сделать реактивную обертку.

Но можно гораздо проще и эффективней - через Broadcast Channel API. C помощью него можно создавать канал, постить в него сообщения и слушать сообщения приходящие в этот канал.

// Создаем канал
const bc = new BroadcastChannel("share_channel");

// Посылаем сообщение в канал
bc.postMessage("Сообщение какое-то");

// Ловим событие в канале
bc.onmessage = (event) => {
  console.log(event);
};

Также postMessage можно использовать для связи открытых окон ( login ) с родительским окном - window.opener.postMessage()

#js

MDN Web Docs

Broadcast Channel API - Web APIs | MDN

The Broadcast Channel API allows basic communication between browsing contexts (that is, windows, tabs, frames, or iframes) and workers on the same origin.

👍14

www.tgoop.com/vuefaq/1415

929 viewsJun 17 at 07:09

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

Во Vue можно даже сделать реактивную обертку.

Но можно гораздо проще и эффективней - через Broadcast Channel API. C помощью него можно создавать канал, постить в него сообщения и слушать сообщения приходящие в этот канал.

// Создаем канал
const bc = new BroadcastChannel("share_channel");

// Посылаем сообщение в канал
bc.postMessage("Сообщение какое-то");

// Ловим событие в канале
bc.onmessage = (event) => {
  console.log(event);
};

BY Vue-FAQ