Отслеживание событий хранилища
Реагируйте на изменения хранилища в других вкладках с помощью события storage
«Отслеживание событий хранилища» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Обмен данными между вкладками
Веб-хранилище вызывает событие storage во всех остальных вкладках того же источника при каждом изменении localStorage. Это самый простой способ синхронизировать несколько открытых вкладок одного приложения — например, передать выход из учётной записи или переключение темы.
Регистрация обработчика
Подключите обработчик к window: window.addEventListener("storage", handleStorage). Слушатель срабатывает только в других вкладках или окнах того же источника — никогда в той вкладке, где произошло изменение, поскольку она уже знает об обновлении.
window.addEventListener("storage", (e) => {
console.log("key:", e.key, "new:", e.newValue);
});Свойства StorageEvent
Событие содержит key (изменившийся ключ), oldValue и newValue (строки или null), url (страницу, вызвавшую изменение) и storageArea (объект хранилища — localStorage или sessionStorage).
clear() устанавливает key в null
Когда другая вкладка вызывает localStorage.clear(), событие хранилища срабатывает один раз с условием key === null, а oldValue и newValue имеют значение null. Обрабатывайте этот случай отдельно, чтобы отличать полную очистку от обновления одного ключа.
Поведение removeItem
Вызов removeItem вызывает событие с условием newValue === null, при этом oldValue содержит предыдущую строку. Отличайте удаление ключа от установки строкового значения "null", проверяя, что newValue строго равно null, а не строке "null".
Ограничение одной вкладкой
Событие никогда не срабатывает во вкладке, записавшей изменение. Чтобы реагировать на собственные записи, отправляйте пользовательское событие после setItem либо оберните setItem во вспомогательную функцию, которая вызывает и API хранилища, и шину событий приложения.
function setItem(key, val) {
localStorage.setItem(key, val);
window.dispatchEvent(new CustomEvent("local-storage", { detail: { key, val } }));
}Выход из учётной записи во всех вкладках
При выходе пользователя из учётной записи устанавливайте ключ вроде auth:logout с временной меткой. Другие вкладки отслеживают этот ключ в событии хранилища и немедленно очищают собственное состояние сеанса, перенаправляя пользователя на страницу входа без необходимости повторного щелчка.
Синхронизация темы и настроек
Когда пользователь переключает тему в одной вкладке, записывайте theme в localStorage. Обработчик хранилища в каждой другой вкладке считывает новое значение и применяет document.documentElement.dataset.theme — изменение мгновенно появляется во всех открытых вкладках.
Фильтрация по ключу
Один обработчик может обслуживать множество функций, выбирая ветку по e.key. Оператор выбора делает диспетчеризацию понятной: каждый вариант обрабатывает один ключ хранилища и игнорирует несвязанные изменения, которые в то же хранилище записывают другие функции.
sessionStorage не работает между вкладками
sessionStorage принадлежит отдельной вкладке — его записи никогда не вызывают события хранилища в других вкладках, поскольку у них собственные независимые хранилища sessionStorage. Используйте localStorage для обмена сигналами между вкладками, даже если сразу после этого удаляете ключ.
Альтернатива BroadcastChannel
Для более развитого обмена сообщениями между вкладками API BroadcastChannel передаёт структурированные данные, не обращаясь к хранилищу: new BroadcastChannel("app").postMessage({ type: "logout" }). Используйте BroadcastChannel для временных сигналов, а события хранилища — для состояния, которое также должно сохраняться.
Проверка знаний
Если Tab A вызывает localStorage.setItem("theme", "dark"), какие вкладки получают событие хранилища?
Итоги
Событие хранилища уведомляет другие вкладки об изменениях localStorage и содержит key, oldValue, newValue и storageArea. Оно не срабатывает во вкладке, выполняющей запись, поэтому для полной локальной и удалённой отправки событий объединяйте его с пользовательским событием. Используйте этот механизм для передачи выхода из учётной записи, синхронизации темы и любых данных, которые должны оставаться согласованными в разных окнах браузера.
Часто задаваемые вопросы
Урок «Отслеживание событий хранилища» бесплатный?
Да — полный текст урока «Отслеживание событий хранилища» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Отслеживание событий хранилища»?
Реагируйте на изменения хранилища в других вкладках с помощью события storage Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Отслеживание событий хранилища»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- localStorage и sessionStorage
- Получение, установка и удаление элементов
- Отслеживание событий хранилища
- Безопасность: что никогда не следует хранить в хранилище