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

Two tabs

Для обміну даними між фреймами, вкладками чи вікнами браузера повинно слугувати майбутнє 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 подіями.

Коментарі

Популярні дописи з цього блогу

Колір в CSS

RedBeanPHP — проста і потужна ORM

Порівняння швидкодії PHP-фреймворків