Какой максимальный объем данных можно хранить в LocalStorage браузера?

Question

Какой максимальный объем данных можно хранить в LocalStorage браузера?

Тип вопроса: Веб-тестирование Вероятность: 10% Категория: QA Тестировщик

Ответ

Большинство современных браузеров предоставляет ~5 МБ (мегабайт) на один домен (протокол + домен + порт). Это ограничение может незначительно варьироваться (например, до 10 МБ в некоторых браузерах).

Практические аспекты:

Данные хранятся только в виде строк (key-value). Для объектов используйте JSON.stringify() при записи и JSON.parse() при чтении.
Превышение лимита вызывает исключение QuotaExceededError.
Объем общий для всех ключей в рамках домена.

Пример проверки доступного пространства (осторожно, очистит данные test):

function estimateLocalStorageLimit() {
  const testKey = 'test';
  let data = '';
  // Создаем строку ~1 МБ
  const oneMegabyte = 'a'.repeat(1024 * 1024);

  try {
    // Пытаемся записывать данные, пока не получим ошибку
    while (true) {
      data += oneMegabyte;
      localStorage.setItem(testKey, data);
    }
  } catch (e) {
    // Вычисляем записанный объем в МБ
    const used = (data.length / (1024 * 1024)).toFixed(2);
    console.log(`Примерный доступный объем: ${used} МБ`);
    localStorage.removeItem(testKey); // Очистка
  }
}

Важно: Для надежных приложений не стоит полагаться на максимальный лимит, а реализовать обработку ошибок при записи.

Ответ 18+ 🔞

Ну и история с этим вашим localStorage, блядь! Сидит он там, в браузере, как сука царь в своём царстве, и выдаёт тебе аж целых пять мегабайт на один домен! Ну, в некоторых браузерах до десяти может дотянуть, но это уже как повезёт, ёпта.

А теперь слушай сюда, главные подводные ебучки-воробушки, которые тебя ждут:

Хранит он всё в виде строк, блядь! Ты ему объект суёшь, а он тебе — «пошёл нахуй, я строки люблю». Так что не ленись, оборачивай свой объект в JSON.stringify() перед записью, а когда читаешь — JSON.parse(), чтобы обратно развернуть. Иначе получишь какую-нибудь хуйню вроде "[object Object]".
Лимит — он общий, сука! Это не пять мегабайт на ключ, а на всю твою деятельность в рамках домена. Напихаешь туда всякого хлама — и пиздец, QuotaExceededError тебе в сраку.
Проверить, сколько осталось, можно, но это гемор. Вот, смотри, примерный способ, но он, блядь, очистит ключ 'test', имей в виду!

function estimateLocalStorageLimit() {
  const testKey = 'test';
  let data = '';
  // Создаем строку ~1 МБ
  const oneMegabyte = 'a'.repeat(1024 * 1024);

  try {
    // Пытаемся записывать данные, пока не получим ошибку
    while (true) {
      data += oneMegabyte;
      localStorage.setItem(testKey, data);
    }
  } catch (e) {
    // Вычисляем записанный объем в МБ
    const used = (data.length / (1024 * 1024)).toFixed(2);
    console.log(`Примерный доступный объем: ${used} МБ`);
    localStorage.removeItem(testKey); // Очистка
  }
}

А главный вывод, блядь, какой? Не рассчитывай на эти пять мегабайт как на что-то святое! Пиши свою логику так, чтобы она не охуела и не сломалась, если место кончилось. Обрабатывай ошибки записи, чисти за собой хвосты, и будет тебе счастье, а не внезапный пиздец для пользователя.