Синхронізація даних між вкладками
Вступ
Коли ви робите покупки онлайн, у вас може бути відкрито кілька вкладок у браузері. Уявіть, що ви додаєте товар у кошик в одній вкладці і хочете, щоб кошик автоматично оновлювався у всіх інших відкритих вкладках. Це поширена вимога в сучасних веб-додатках, зокрема на платформах для електронної комерції. У цій статті ми розглянемо, як синхронізувати дії між кількома вкладками за допомогою JavaScript.
Виклик: Як зберігати вкладки синхронізованими
Уявімо, що ви керуєте інтернет-магазином. Ви додаєте товар у кошик в одній вкладці, і тепер хочете, щоб цей товар з'явився в усіх інших вкладках, які ви відкрили на тому ж сайті. Це може бути складно, оскільки кожна вкладка працює в ізольованому середовищі. Однак ми можемо використати кілька розумних технік, щоб це зробити.
У цій статті ми зосередимося на простому рішенні, яке використовує API localStorage та storage подію (storage event).
Це дозволить нам синхронізувати дії між кількома вкладками в одному браузері без необхідності складних налаштувань на сервері.
Як це працює: Використання localStorage та події storage
Об'єкт localStorage дозволяє зберігати дані, які спільно використовуються усіма вкладками в браузері. Будь-яка зміна, зроблена в localStorage, автоматично стане видимою для всіх інших вкладок, відкритих в тому ж браузері. Це потужний інструмент для синхронізації даних, таких як кошик покупок, між кількома вкладками.
Ми також можемо використовувати подію storage для прослуховування змін у localStorage. Ця подія спрацьовує в кожній вкладці (крім тієї, яка здійснила зміну), коли дані в localStorage змінюються. Тому щоразу, коли ми додаємо товар до кошика в одній вкладці, інші вкладки автоматично оновлюють свій інтерфейс.
Приклад: Синхронізація кошика між кількома вкладками
Ось простий приклад того, як ми можемо це реалізувати.
Цей код дозволяє кошику покупок автоматично оновлюватися між кількома вкладками, коли товари додаються до кошика.
Приклад на JavaScript (Використовуючи localStorage та подію storage):
// Функція для додавання товару до кошика
function addToCart(item) {
let cart = JSON.parse(localStorage.getItem('cart')) || [];
cart.push(item);
localStorage.setItem('cart', JSON.stringify(cart)); // Оновлюємо localStorage з новим кошиком
}
// Прослуховування змін у localStorage між вкладками
window.addEventListener('storage', (event) => {
if (event.key === 'cart') {
let updatedCart = JSON.parse(localStorage.getItem('cart'));
updateCartDisplay(updatedCart);
}
});
// Функція для оновлення відображення кошика
function updateCartDisplay(cart) {
document.getElementById('cartCount').innerText = cart.length;
}
// Ініціалізація стану кошика та оновлення інтерфейсу
let initialCart = JSON.parse(localStorage.getItem('cart')) || [];
updateCartDisplay(initialCart);
Приклад HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart Sync</title>
</head>
<body>
<h1>Shopping Cart Sync</h1>
<p>Items in cart: <span id="cartCount">0</span></p>
<!-- Example buttons to add items to the cart -->
<button onclick="addToCart('item1')">Add Item 1</button>
<button onclick="addToCart('item2')">Add Item 2</button>
</body>
</html>
**localStorage**: Кошик зберігається в localStorage, який спільно використовується всіма вкладками в одному браузері. Коли ви додаєте товар до кошика, він зберігається в localStorage.
2. **Подія Storage**: Ми слухаємо зміни в localStorage за допомогою події storage. Таким чином, коли одна вкладка додає товар до кошика, інші вкладки автоматично виявляють зміни та оновлюють відображення кошика.
3. **Оновлення інтерфейсу**: Коли одна вкладка змінює кошик, інші вкладки виявляють зміни та оновлюють відображення з новими даними кошика.
## Переваги:
1. **Простота**: Цей підхід легко реалізувати. Не потрібно серверної частини або складної налаштування — достатньо використовувати вбудовані можливості браузера: localStorage та подію storage.
2. **Без налаштування серверної частини**: На відміну від серверних рішень (як WebSockets), цей метод не вимагає додаткової серверної інфраструктури. Все синхронізується безпосередньо в браузері користувача.
3.
**Низька вартість обробки**: Цей метод працює повністю на стороні клієнта, тому не створює навантаження на сервер чи мережу.
4. **Персистентне зберігання**: Дані зберігаються навіть після оновлення сторінки, що забезпечує постійну синхронізацію кошика чи інших даних між вкладками та сесіями.
5. **Синхронізація між вкладками**: Це ефективне рішення для синхронізації даних між кількома вкладками, що робить його чудовим для таких сценаріїв, як кошик покупок на сайтах електронної комерції.
## Недоліки:
1. **Обмеження лише одним браузером і пристроєм**: Дані в localStorage доступні лише в одному і тому ж браузері на одному пристрої. Якщо користувач відкриє ваш сайт в іншому браузері чи на іншому пристрої, дані не будуть передаватися.
2. **Відсутність синхронізації в реальному часі між користувачами**: Цей метод працює лише в межах браузера одного користувача, тому не буде синхронізуватися між різними користувачами або пристроями.
3. **Обмеження зберігання**: localStorage має обмеження зберігання (зазвичай близько 5 МБ), тому він не підходить для зберігання великих обсягів даних.
Для більших додатків вам може знадобитися дослідити інші варіанти, такі як IndexedDB або серверні рішення.
4. **Відсутність сповіщення в тій самій вкладці**: Хоча подія storage повідомляє інші вкладки про зміни, вона не сповіщає вкладку, яка здійснила зміну. Це означає, що якщо вкладка оновить localStorage, вона не отримає миттєвого повідомлення про цю зміну. Для цього потрібно буде оновити вкладку або вручну перевірити localStorage у цій вкладці.
5. **Безпека даних**: Дані, що зберігаються в localStorage, не шифруються і можуть бути доступні JavaScript, який працює на тому ж домені, що може створити проблеми з безпекою для чутливих даних.
## Висновок
Підсумовуючи, якщо вам потрібно лише синхронізувати дані між вкладками в одному браузері, використання localStorage у поєднанні з подією storage є простим і ефективним рішенням. Це ідеально підходить для таких сценаріїв, як оновлення кошика покупок між вкладками.
Цей метод не потребує серверної системи або складних протоколів зв'язку — лише прості функції браузера, які можуть мати великий вплив.
Однак слід враховувати його обмеження, такі як робота лише в межах одного браузера та пристрою. Для більш складних сценаріїв або синхронізації між користувачами/пристроями вам, можливо, доведеться розглянути інші рішення, але для багатьох щоденних випадків цей метод є як практичним, так і ефективним.
Перекладено з: [How to Sync Data Across Multiple Tabs in a Browser Using JavaScript](https://farshadth.medium.com/how-to-sync-data-across-multiple-tabs-in-a-browser-using-javascript-6251deb609b7?source=rss------javascript-5)