Максимальный размер значения в localStorage: ограничения браузеров

Быстрый ответ

Похоже, что функциональность localStorage, предложенная HTML5, не ограничена, однако на практике icтинное ограничение существует. Обычно оно составляет около 5 МБ на домен. Впрочем, есть способ определить точное ограничение для разных браузеров с использованием JavaScript-функции, которая с помощью метода проб и ошибок позволяет точно определить допустимый объем данных:

function testLocalStorage() {
  let testKey = 'test', 
      testValue = 'a',
      increment = 1024; // Увеличиваем объем данных на 1 КБ
  // Пытаемся увеличить объем данных до достижения максимума
  while (testValue.length < (5 * 1024 * increment)) {
    try {
      localStorage.setItem(testKey, testValue);
      testValue += new Array(increment + 1).join('a'); // Дополняем объем данных
    } catch (e) {
      localStorage.removeItem(testKey); // Возвращаемся к предыдущему объему данных
      return (testValue.length – increment) / 1024 + ' КБ'; // Сообщаем, сколько данных удалось сохранить
    }
  }
}

console.log('Лимит localStorage:', testLocalStorage());

Так, мы последовательно устанавливаем и увеличиваем объем данных, пока не достигнем ограничения.

Объем хранения в зависимости от используемого браузера

Максимальный объем localStorage различается в зависимости от браузера:

• Google Chrome, Mozilla Firefox, Opera: Примерно 10 МБ.
• Internet Explorer: Порядка 10 МБ на хранилище.
• Firefox (значение по умолчанию для домена): Ограничен до 5120 КБ.

Эти значения не являются абсолютными и могут меняться от версии к версии браузера и его настроек.

Какие данные и в каком формате можно хранить

localStorage работает только со строками. Это означает, что если требуется сохранить более сложные структуры (например, объекты), их необходимо сериализовать в строку. Вот пример кода для сохранения объекта и дальнейшей его десериализации:

var user = {name: 'Sam', age: 21};
localStorage.setItem('user', JSON.stringify(user));

var retrievedUser = JSON.parse(localStorage.getItem('user'));

Помните, что сериализация увеличивает объем данных за счет дополнительной информации в строковом представлении.

Стратегии увеличения емкости localStorage

Сжатие данных

Сначала сжимайте данные перед их сохранением в localStorage. Вы можете воспользоваться библиотеками, например, LZ-String.

Предотвращение ошибки QuotaExceededError

Подготавливайте приложение к возможным ограничениям localStorage: проверяйте доступность и отлавливайте исключения. Ошибка QuotaExceededError возникает, когда место в хранилище заканчивается – умейте грамотно обработать такую ситуацию.

Разработка стратегии управления данными

Придумайте стратегию удаления данных для ситуации, когда место заканчивается, чтобы знать, от какой информации лучше избавиться в первую очередь.

Визуализация

Ниже представлен пример распределения данных:

| Ключ/Элемент   | Данные                     | Размер   |
|----------------|----------------------------|---------:|
| `Key1`         | Персональные настройки в формате JSON | 🚰 (1МБ) |
| `Key2`         | Идентификатор сессии       | 🚰 (0.5МБ)|
| `...`          | Остальные пары ключ-значение  | `...`    |
| **Итого**      | **Максимальный объем**     | **5МБ** 🛢️  |

Лучшие практики использования localStorage

Адаптация под различные браузеры

Помните о том, что браузеры имеют разное ограничение. Тестируйте своё веб-приложение в различных окружениях.

Обработка ошибок переполнения

Нужно обрабатывать ошибку QuotaExceededError и предусматривать стратегии для очистки данных или информирования пользователей.

Регулярные проверки

Версии браузеров обновляются, настройки меняются – регулярно проверяйте лимиты localStorage.

Полезные материалы

1. HTML5 Веб-хранилище — SitePoint
2. Window.localStorage — Веб-API | MDN
3. Локальное хранилище и его применение на веб-сайтах — Smashing Magazine
4. HTML Веб-хранилище API
5. Can I use... — поддержка HTML5, CSS3, и других технологий
6. Введение в localStorage и sessionStorage | DigitalOcean
7. HTML Стандарт