StorageEvent — подія storage між вкладками браузера

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

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	9

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

Переглядач
	3	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' });

<header>
  <h2 class="title">Storage Events</h2>
  <p class="description">Синхронізація тексту між вкладками за допомогою localStorage.</p>
</header>
<main>
  <div class="result">
    <label for="shared-text">Введіть текст:</label>
    <input type="text" id="shared-text" placeholder="Ваш текст тут..." />
    <p><strong>Оновлення:</strong> <span id="synced-text">...</span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#shared-text {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#synced-text {
  color: #006600;
}

const inputField = document.getElementById('shared-text');
const syncedText = document.getElementById('synced-text');

// Оновлюємо текст у localStorage при введенні
inputField.addEventListener('input', event => {
  const value = event.target.value;
  localStorage.setItem('sharedText', value);
  syncedText.textContent = value;
});

// Синхронізуємо текст у разі змін у localStorage
window.addEventListener('storage', event => {
  if (event.key === 'sharedText') {
    syncedText.textContent = event.newValue || '...';
  }
});

// Ініціалізація: відображаємо текст із localStorage при завантаженні сторінки
const savedText = localStorage.getItem('sharedText');
if (savedText) {
  inputField.value = savedText;
  syncedText.textContent = savedText;
} else {
  syncedText.textContent = '...';
}
//# sourceURL=pen.js