Какие знаешь Events возникающие при изменении storage?

События (Events) при изменении Storage

В контексте веб-разработки, события, связанные с изменением хранилища данных, возникают при работе с двумя основными API браузера: Web Storage API (localStorage и sessionStorage) и IndexedDB. Эти события позволяют отслеживать изменения в данных и реагировать на них, например, для синхронизации состояния между различными окнами или документами.

1. Событие storage для Web Storage API

Это основное событие, которое возникает при изменении данных в localStorage или sessionStorage. Важно понимать, что оно не возникает в том же окне или документе, где произошло изменение, а только в других окнах/фреймах того же сайта (в рамках одного origin), которые слушают это событие. Это обеспечивает механизм коммуникации между различными экземплярами приложения.

Основные свойства объекта события (StorageEvent):

• key: Имя ключа, который был изменен. Если изменение было вызвано clear(), значение будет null.
• newValue: Новое значение после изменения. При удалении (removeItem) или очистке (clear) – null.
• oldValue: Старое значение до изменения. Если ключ был добавлен, значение – null.
• storageArea: Ссылка на объект хранилища (localStorage или sessionStorage), где произошло изменение.
• url: URL документа, где произошло изменение.

Пример добавления и обработки события:

// Этот код выполняется во втором окне приложения.
// Он слушает изменения storage, сделанные в первом окне.

window.addEventListener('storage', function(event) {
    console.log('Storage event detected:', event.key);

    if (event.key === 'userTheme') {
        // Обновляем тему интерфейса в ответ на изменение из другого окна
        applyTheme(event.newValue);
    }

    if (event.key === 'cartItems') {
        // Синхронизируем состояние корзины
        updateCartDisplay(event.newValue);
    }
});

// В первом окне изменение storage не вызывает событие здесь,
// но оно будет вызвано во всех других окнах этого origin.
localStorage.setItem('userTheme', 'dark');

2. События для IndexedDB

IndexedDB – более сложная, транзакционная база данных. События здесь связаны не с общими изменениями базы, а преимущественно с версионными обновлениями структуры (объектов хранилища или индексов).

• onupgradeneeded: Это ключевое событие, которое возникает при открытии базы данных с версией выше текущей. В обработчике этого события выполняется создание или изменение схемы базы (объектов хранилища и индексов). Это событие является частью жизненного цикла открытия базы (IDBOpenDBRequest).

const openRequest = indexedDB.open('myDatabase', 2); // Открываем версии 2

openRequest.onupgradeneeded = function(event) {
    const db = event.target.result;

    if (!db.objectStoreNames.contains('users')) {
        // Создаем новое хранилище объектов при переходе на версию 2
        const store = db.createObjectStore('users', { keyPath: 'id' });
        store.createIndex('byEmail', 'email', { unique: true });
    }
};

openRequest.onsuccess = function(event) {
    console.log('База открыта');
};

Для отслеживания фактических изменений данных в IndexedDB (аналог события storage для Web Storage) стандартный API не предоставляет прямого механизма. Однако можно реализовать подобную логику, используя:

• Паттерн "Observable" или проксирование методов (add, put, delete) в собственной абстракции.
• Фоновые процессы (как Service Workers) для периодической проверки данных.
• Для синхронизации между окнами – использование Broadcast Channel API или Shared Workers для передачи сообщений о изменениях.

3. Практическое применение и важные замечания

• Кросс-оконная синхронизация: Событие storage идеально подходит для поддержания согласованного состояния между несколькими открытыми окнами или табами одного сайта (например, обновление настроек, корзины покупок).
• Ограничение scope: Событие storage работает только в рамках одного origin (протокол+домен+порт). Разные сайты не могут слушать изменения друг друга.
• Отсутствие в текущем контексте: Это часто вызывает путаницу. Если вы изменяете localStorage и ожидаете событие в том же окне – оно не произойдет. Это событие предназначено исключительно для межоконного взаимодействия.
• Современные альтернативы: Для сложных сценариев коммуникации между окнами или отслеживания состояния также можно рассматривать Broadcast Channel API, SharedWorker или window.postMessage.

Таким образом, основным и наиболее часто используемым событием для отслеживания изменений в хранилище является storage событие Web Storage API. Для IndexedDB основной механизм отслеживания изменений данных остается на уровне реализации приложения, а стандартные события ориентированы на управление структурой базы.