Что произойдёт при превышении лимита localStorage?

Краткий ответ

При превышении лимита localStorage браузер выбрасывает ошибку [QuotaExceededError]. Приложение не сломается, но данные не сохранятся! ⚠️

try {
  localStorage.setItem('bigData', 'очень_большие_данные');
} catch (error) {
  if (error instanceof QuotaExceededError) {
    console.log('Лимит превышен!'); // Обрабатываем ошибку
  }
}

Полный ответ

Представь, что localStorage — это коробка определённого размера. Если попытаться положить туда больше, чем она вмещает, крышка не закроется! 📦💥

Какой лимит у localStorage

Обычно у браузеров лимит 5-10 МБ на домен:

// Обычный лимит: 5-10 МБ
// Разный в разных браузерах
// Общий для всех storage API одного домена

Что происходит при превышении

Браузер кидает специальную ошибку:

try {
  // Пытаемся сохранить очень много данных
  localStorage.setItem('hugeData', 'x'.repeat(10000000)); // 10 МБ
} catch (error) {
  // Ловим ошибку превышения лимита
  if (error.name === 'QuotaExceededError') {
    console.log('Невозможно сохранить: лимит превышен!');
    // Обрабатываем ситуацию
  }
}

Как проверить, есть ли место

Можно проверить вручную:

function canStoreData(key, data) {
  try {
    localStorage.setItem(key, data);
    localStorage.removeItem(key); // Убираем тестовые данные
    return true; // Места достаточно
  } catch (error) {
    return false; // Места нет
  }
}
 
// Проверяем перед сохранением
if (canStoreData('test', largeData)) {
  localStorage.setItem('test', largeData);
} else {
  console.log('Недостаточно места!');
}

Когда может произойти

Большие данные пользователя

// ❌ Проблема — сохраняем большие данные
const userDocuments = getAllUserDocuments(); // Очень большой массив
localStorage.setItem('documents', JSON.stringify(userDocuments));
// Может выкинуть QuotaExceededError!

Накопление данных

// ❌ Проблема — постоянно добавляем данные
for (let i = 0; i < 10000; i++) {
  localStorage.setItem(`item${i}`, largeData);
  // Рано или поздно превысим лимит!
}

Как избежать проблем

Проверять место заранее

// ✅ Хорошо — проверяем перед сохранением
try {
  localStorage.setItem('data', importantData);
} catch (error) {
  if (error.name === 'QuotaExceededError') {
    // Освобождаем место или используем другое хранилище
    clearOldData();
    localStorage.setItem('data', importantData);
  }
}

Использовать подходящие хранилища

// ✅ Для больших данных — IndexedDB
const db = indexedDB.open('largeDataDB');
 
// ✅ Для временных данных — sessionStorage
sessionStorage.setItem('temporary', data);
 
// ✅ Для кэша — Cache API
caches.open('myCache');

Частые ошибки

Не обрабатывать ошибку

// ❌ Плохо — не ловим ошибку
localStorage.setItem('big', hugeData); // Может сломать приложение!
 
// ✅ Хорошо — всегда оборачиваем в try-catch
try {
  localStorage.setItem('big', hugeData);
} catch (error) {
  if (error.name === 'QuotaExceededError') {
    // Обрабатываем корректно
  }
}

Хранить всё в localStorage

// ❌ Плохо — пытаемся хранить большие файлы
localStorage.setItem('userPhotos', JSON.stringify(photos));
 
// ✅ Лучше — используем File API или IndexedDB
const db = indexedDB.open('photosDB');

Простые правила

Лимит 5-10 МБ — не больше! ⚠️
QuotaExceededError — ошибка при превышении 🚨
try-catch — всегда оборачивай в блоки 🛡️
Проверяй место — перед сохранением больших данных 🔍
Другие хранилища — для больших данных используй IndexedDB 🗄️
Очищай старое — регулярно удаляй ненужное 🧹

Понимание ограничений localStorage помогает писать более надёжные приложения! 💪

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪