JS об'єкт StorageEvent

Загальний опис

StorageEvent — це події, які виникають, коли дані у веб-сховищі (localStorage або sessionStorage) змінюються, і ці зміни стають доступними іншим вкладкам або вікнам браузера. Подія storage спрацьовує тільки у вкладках або вікнах, відмінних від того, де відбулася зміна. Це дозволяє синхронізувати стан програми між кількома вкладками.

Подія storage доступна через window і має кілька властивостей:

• key — назва зміненої властивості в сховищі.
• oldValue — попереднє значення цієї властивості.
• newValue — нове значення властивості.
• url — URL-адреса сторінки, яка викликала зміну.
• storageArea — об’єкт localStorage або sessionStorage, що зазнав змін.

Приклад використання

window.addEventListener('storage', (event) => {
    console.log(`Ключ: ${event.key}`);
    console.log(`Старе значення: ${event.oldValue}`);
    console.log(`Нове значення: ${event.newValue}`);
    console.log(`Джерело: ${event.url}`);
});

У цьому прикладі ми слухаємо події storage. Якщо дані в localStorage або sessionStorage змінюються в іншій вкладці, ми отримуємо детальну інформацію про зміни.

Особливість подій storage полягає в тому, що вони не спрацьовують у тій самій вкладці, де було змінено значення. Наприклад, якщо ви використовуєте localStorage.setItem() у першій вкладці, то подія виникне лише в інших відкритих вкладках з тим самим доменом.

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

правити

Порада

Завжди перевіряйте властивість key в події storage, щоб знати, який саме ключ змінено. Це дозволяє обробляти тільки ті події, які вас цікавлять.

автор: Bond правити

Порада

Не використовуйте storage для передачі великих обсягів даних між вкладками. Веб-сховище оптимізоване для невеликих значень (наприклад, налаштувань), а подія storage може стати перевантаженою.

автор: Bond правити

Порада

Користуйтесь JSON.stringify() і JSON.parse() для збереження об’єктів у localStorage. storage не підтримує зберігання складних типів даних, лише строки. Наприклад:

localStorage.setItem('user', JSON.stringify({ name: 'Анна', age: 25 }));

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

window.addEventListener('storage', (event) => {
    // Ваш код
});

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	13	4	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	14	3

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

// Установка теми
function setTheme(theme) {
    document.body.className = theme;
    localStorage.setItem('theme', theme);
}

// Слухач події
window.addEventListener('storage', (event) => {
    if (event.key === 'theme') {
        setTheme(event.newValue);
    }
});

// Ініціалізація
const savedTheme = localStorage.getItem('theme') || 'light';
setTheme(savedTheme);

// Додавання товару до кошика
function addToCart(item) {
    const cart = JSON.parse(localStorage.getItem('cart') || '[]');
    cart.push(item);
    localStorage.setItem('cart', JSON.stringify(cart));
}

// Слухач події
window.addEventListener('storage', (event) => {
    if (event.key === 'cart') {
        console.log('Оновлений кошик:', JSON.parse(event.newValue));
    }
});

// Ініціалізація
addToCart({ id: 1, name: 'Товар 1' });