Какой максимальный размер хранилища у localStorage?

Максимальный размер хранилища localStorage

Стандартный лимит

Официальный размер localStorage в большинстве браузеров составляет 5-10 МБ на каждый origin (домен + протокол + порт). Чаще всего это 5 МБ (5242880 байт), но точное значение зависит от браузера и его конфигурации.

По браузерам

Chrome/Edge:     10 МБ
Firefox:         10 МБ
Safari:          5 МБ
Internet Explorer: 10 МБ
Opera:           5-10 МБ

Это мягкие ограничения, и браузер может запросить разрешение у пользователя на увеличение в некоторых случаях.

Как проверить доступный размер

function getStorageSize() {
  let size = 0;
  try {
    for (let key in localStorage) {
      if (localStorage.hasOwnProperty(key)) {
        size += localStorage[key].length + key.length;
      }
    }
  } catch (e) {
    console.error('Ошибка при расчёте размера:', e);
  }
  return size; // размер в байтах
}

console.log('Текущий размер:', getStorageSize(), 'байт');
console.log('В МБ:', (getStorageSize() / 1024 / 1024).toFixed(2));

Определение лимита

function findStorageLimit() {
  const testKey = '__storageTest_' + Date.now();
  const testValue = new Array(1024).join('a'); // 1 КБ
  let limit = 0;
  
  try {
    for (let i = 0; i < 10 * 1024; i++) { // до 10 МБ
      try {
        localStorage.setItem(testKey + i, testValue);
        limit = (i + 1) * testValue.length;
      } catch (e) {
        // Превышен лимит
        break;
      }
    }
    
    // Очистка
    for (let i = 0; limit / (i + 1) / testValue.length > 1; i++) {
      localStorage.removeItem(testKey + i);
    }
    
    return limit;
  } catch (e) {
    return 0;
  }
}

console.log('Доступный лимит:', findStorageLimit(), 'байт');

Практические ограничения

Есть несколько важных моментов, которые часто забывают:

// 1. Кодировка UTF-16 при сохранении строк
// Каждый символ может занимать 2 байта в localStorage
const text = 'привет'; // На русском
localStorage.setItem('ru', text);
// Размер: 6 символов * 2 байта = 12 байт (может быть больше)

// 2. Ключи тоже считаются в размер
localStorage.setItem('очень-длинный-ключ', 'значение');
// Размер = длина_ключа + длина_значения

// 3. Синхронизация между вкладками
// localStorage общее для всех вкладок одного origin
// Избегай одновременных больших сохранений

// 4. Проверка доступного пространства
function canStoreData(key, value) {
  try {
    const testKey = '__test_' + Date.now();
    localStorage.setItem(testKey, value);
    localStorage.removeItem(testKey);
    return true;
  } catch (e) {
    if (e.name === 'QuotaExceededError') {
      return false;
    }
    throw e;
  }
}

if (canStoreData('myKey', myLargeValue)) {
  localStorage.setItem('myKey', myLargeValue);
} else {
  // Обработать переполнение
  console.warn('localStorage переполнен');
}

Когда localStorage недостаточно

// Если нужно больше — используй IndexedDB (до гигабайтов)

// Пример использования IndexedDB
function saveToIndexedDB(key, value) {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDB', 1);
    
    request.onsuccess = (e) => {
      const db = e.target.result;
      const transaction = db.transaction(['store'], 'readwrite');
      const objectStore = transaction.objectStore('store');
      
      objectStore.put({ key, value, timestamp: Date.now() });
      
      transaction.oncomplete = () => resolve();
      transaction.onerror = () => reject(transaction.error);
    };
    
    request.onerror = () => reject(request.error);
  });
}

// localStorage: быстро, 5-10 МБ, синхронно
// IndexedDB: медленнее, может быть до гигабайтов, асинхронно

Обработка ошибок

try {
  localStorage.setItem('key', 'value');
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.error('localStorage заполнен');
    // Удалить старые данные и попробовать снова
  } else if (e.name === 'SecurityError') {
    console.error('Ошибка безопасности, возможно приватный режим');
  } else {
    console.error('Неизвестная ошибка:', e);
  }
}

Выводы

1. Стандартный лимит — 5-10 МБ в зависимости от браузера
2. Это мягкое ограничение — браузер может попросить разрешение
3. Всегда проверяй перед сохранением больших объёмов данных
4. Для больших объёмов используй IndexedDB вместо localStorage
5. Помни о кодировке — UTF-16 может занимать больше места
6. Обрабатывай ошибки — QuotaExceededError будет выброшена при переполнении