Комунікація між вкладками браузера

Для обміну даними між фреймами, вкладками чи вікнами браузера повинно слугувати майбутнє SharedWorker API. Воно вже кілька років присутнє в Chrome, і лише недавно з’явилося у Firefox. Але все ще не відомо, коли ж воно буде реалізовано в IE або Safari. Проте, існує альтернатива, яка може використовуватися вже сьогодні. Давайте її розглянемо!

Часто виникає потреба у відносно красивому рішенні такого сценарію: припустимо, користувач потрапляє на ваш сайт, автентифікується, також відкриває його в іншій вкладці, і виходить з системи. Він, як і раніше, виглядає автентифікованим на першій вкладці, за винятком того, що будь-яка взаємодія з бекендом закінчиться провалом. Тому, було б краще, якби в такій ситуації якимось чином зреагувати на вихід із системи — наприклад, показати діалогове вікно автентифікації, тощо.

Звичайно, для цього можна використати WebSocket API — але, як на мене, це вже занадто. Хочеться чогось простого, швидкого та низькорівневого для комунікації між вкладками. Перше, що спадає на думку — записувати дані у document.cookie чи window.localStorage, а на іншій вкладці періодично перевіряти дані через setInterval. Але, у такому випадку постійно буде витрачатись частина ресурсів на перевірку того, що може ніколи і не виникнути. Крім того, це не красиво.

Обмін даними через localStorage

І тут, як часто буває, рішення прямо під носом — localStorage генерує події. Більше того, можна підписатися на події операцій з даними, які були виконані в іншому контексті браузера (інша вкладка, вікно, фрейм). По суті, це означає, що коли ви взаємодієте з localStorage в одній вкладці, то всі інші вкладки можуть дізнатися про це, слухаючи подію storage об'єкта window. Наприклад:

window.addEventListener('storage', function (event) {
  console.log(event.key, event.newValue);
});

Об'єкт event містить кілька корисних властивостей:

• key — відповідний ключ у localStorage;
• newValue — значення, яке в даний момент присвоєно даному ключу;
• oldValue — значення, яке було до модифікації;
• url — адреса сторінки, на якій відбулася зміна;

Кожного разу, коли вкладка змінює щось у localStorage, буде генеруватися подія у всіх інших вкладках. Це означає, що ми можемо спілкуватися між вкладками браузера просто шляхом установки значень у localStorage.

Спрощене localStorage API

LocalStorage API дуже просте у використанні, до того ж має непогану підтримку серед браузерів. Однак, у рідкісних випадках, все ще є певні особливості — такі, як QuotaExceededError у Safari, немає JSON з коробки, або взагалі відсутня підтримка серед старих браузерів.

З цих причин, існує непоганий модуль local-storage, який забезпечує спрощену API для localStorage, позбавляє від "танців з бубном" у деяких можливих випадках, а також спрощує роботу зі storage подіями.