В современной веб-разработке часто одновременно открывается несколько вкладок или окон. Одна из проблем, с которыми сталкиваются разработчики, — как беспрепятственно обмениваться данными на этих вкладках. LocalStorage, веб-API, предоставляемый современными браузерами, предлагает простое и эффективное решение этой проблемы. В этой статье мы рассмотрим различные методы обмена данными между вкладками с помощью LocalStorage, а также приведем примеры кода.

Метод 1: использование прослушивателя событий хранилища
Событие хранилища запускается всякий раз, когда происходит изменение в LocalStorage на вкладке. Прослушивая это событие, мы можем обнаружить изменения, внесенные на одной вкладке, и отразить их на других вкладках. Вот пример:

// Tab 1
localStorage.setItem('sharedData', 'Hello, Tab 2!');
// Tab 2
window.addEventListener('storage', function(event) {
  if (event.key === 'sharedData') {
    console.log('Data received:', event.newValue);
  }
});

Метод 2: использование API широковещательного канала
API широковещательного канала обеспечивает связь между различными вкладками или окнами одного и того же происхождения. Он обеспечивает двустороннюю связь между вкладками в реальном времени, что делает его пригодным для обмена данными. Вот пример:

// Tab 1
const broadcastChannel = new BroadcastChannel('dataChannel');
broadcastChannel.postMessage('Hello, Tab 2!');
// Tab 2
const broadcastChannel = new BroadcastChannel('dataChannel');
broadcastChannel.onmessage = function(event) {
  console.log('Data received:', event.data);
};

Метод 3: использование SharedWorker
SharedWorker — это объект JavaScript, который работает в фоновом режиме и доступен с помощью нескольких вкладок. Он действует как мост для обмена данными между вкладками. Вот пример:

// shared-worker.js
onconnect = function(event) {
  const port = event.ports[0];
  port.onmessage = function(event) {
    console.log('Data received:', event.data);
  };
};
// Tab 1
const worker = new SharedWorker('shared-worker.js');
worker.port.postMessage('Hello, Tab 2!');
// Tab 2
const worker = new SharedWorker('shared-worker.js');
worker.port.onmessage = function(event) {
  console.log('Data received:', event.data);
};

Обмен данными между вкладками с помощью LocalStorage — мощный метод веб-разработки. В этой статье мы рассмотрели три эффективных метода: использование прослушивателя событий хранилища, API широковещательного канала и API SharedWorker. В зависимости от вашего конкретного варианта использования вы можете выбрать наиболее подходящий метод для обеспечения беспрепятственного обмена данными между вкладками.