События хранилища и ограничения
Реагируйте на изменения и учитывайте ограничения квоты.
«События хранилища и ограничения» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Реакция на изменения хранилища
Событие storage позволяет одной вкладке реагировать на изменения localStorage в другой вкладке. Оно обеспечивает простую синхронизацию между вкладками.
Прослушивание хранилища
Добавьте обработчик для window. Он срабатывает в OTHER вкладках того же источника при каждом изменении localStorage, но не во вкладке, которая внесла изменение.
window.addEventListener("storage", (e) => {
console.log("Key changed:", e.key);
});Объект StorageEvent
Событие содержит key, oldValue, newValue, storageArea и url. Вместе они точно описывают произошедшее изменение.
window.addEventListener("storage", (e) => {
console.log(e.key, e.oldValue, "->", e.newValue);
});Срабатывает только в других вкладках
Важная тонкость: событие NOT срабатывает в той же вкладке, которая вызвала setItem. Оно предназначено для уведомления остальных вкладок, поэтому не полагайтесь на него при обновлениях в текущей вкладке.
Шаблон синхронизации между вкладками
Используйте событие, чтобы поддерживать согласованность вкладок, например выводить пользователя из системы везде, когда одна вкладка удаляет токен аутентификации.
window.addEventListener("storage", (e) => {
if (e.key === "token" && e.newValue === null) {
logoutUI();
}
});Обнаружение очистки
При выполнении clear() событие срабатывает с key, установленным в null. Обработайте этот случай, чтобы сбросить всё.
window.addEventListener("storage", (e) => {
if (e.key === null) resetApp();
});Квота хранилища
Каждому источнику выделяется ограниченный объём, обычно около 5MB для localStorage в целом. Это намного меньше, чем у IndexedDB, поэтому храните только небольшие объёмы данных.
Ошибки превышения квоты
Превышение квоты вызывает QuotaExceededError при выполнении setItem. Всегда заключайте большие записи или записи с ненадёжными данными в конструкцию try/catch.
try {
localStorage.setItem("big", hugeString);
} catch (e) {
console.log("Storage full:", e.name);
}UTF-16 удваивает расход памяти
Строки хранятся в UTF-16, поэтому каждый символ занимает примерно 2 байта. При квоте 5MB помещается около 2,5 миллиона символов, а для текста, отличного от ASCII, — меньше.
Оценка использования
Примерный объём можно оценить, сложив длины ключей и значений. Точного API нет, но такой подсчёт даёт пригодную для работы оценку.
let total = 0;
for (let i = 0; i < localStorage.length; i++) {
const k = localStorage.key(i);
total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");Когда нужно что-то более вместительное
Для больших или структурированных данных объёмом более нескольких MB используйте IndexedDB. Веб-хранилище лучше всего подходит для небольших флагов, настроек и токенов.
Быстрая проверка
События и ограничения хранилища.
Итоги
Событие storage уведомляет OTHER вкладки одного источника об изменениях localStorage и передаёт key, oldValue и newValue (при очистке key равен null). Квота составляет примерно 5MB, а запись сверх этого лимита вызывает QuotaExceededError, поэтому заключайте рискованные записи в конструкцию try/catch и используйте IndexedDB для больших объёмов данных.
Часто задаваемые вопросы
Урок «События хранилища и ограничения» бесплатный?
Да — полный текст урока «События хранилища и ограничения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «События хранилища и ограничения»?
Реагируйте на изменения и учитывайте ограничения квоты. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «События хранилища и ограничения»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Сохранение и чтение данных
- localStorage и sessionStorage
- Сохранение объектов с помощью JSON
- События хранилища и ограничения