Когда очищается localStorage?

Когда очищается localStorage?

localStorage — это механизм клиентского хранилища в веб-браузерах, позволяющий сохранять данные в виде пар «ключ-значение» без истечения срока действия. В отличие от sessionStorage (очищается при закрытии вкладки) и файлов cookie (могут иметь срок жизни), данные в localStorage сохраняются на неопределенный срок и очищаются только при выполнении определенных условий.

Основные сценарии очистки localStorage:

1. Явное удаление через код JavaScript

Это самый частый и контролируемый способ. Разработчик может удалить данные:

• Удаление конкретного ключа:

localStorage.removeItem('userToken');

• Полная очистка всех данных для домена:

localStorage.clear();

• Удаление через свойство:

delete localStorage['someKey']; // Не рекомендуется, может не работать в некоторых окружениях

2. Очистка данных браузера пользователем

Пользователь может вручную удалить localStorage через настройки браузера:

• В Chrome: Настройки → Конфиденциальность и безопасность → Очистить историю → Выбрать «Файлы cookie и другие данные сайтов».
• В Firefox: Настройки → Конфиденциальность и безопасность → Куки и данные сайтов → Удалить данные.
• В Safari: Настройки → Конфиденциальность → Управление данными веб-сайтов.

При этом данные могут удаляться выборочно (для конкретного сайта) или полностью.

3. Режим инкогнито/приватного просмотра

При закрытии окна в режиме инкогнито все данные localStorage автоматически удаляются. Это важное отличие от обычных вкладок.

4. Удаление через расширения браузера

Расширения для очистки кеша или управления приватностью (например, CCleaner, очистка истории) могут удалять localStorage.

5. Программный сброс настроек браузера

Если пользователь сбрасывает настройки браузера к исходному состоянию, это обычно включает удаление всех локальных данных.

6. Квота хранилища

Браузеры выделяют каждому домену лимит памяти (обычно 5-10 МБ). При попытке превысить лимит может возникнуть ошибка QuotaExceededError. Сама по себе квота не приводит к автоматической очистке, но разработчик должен обрабатывать такие ситуации, возможно удаляя старые данные.

7. Истечение срока действия для отдельных ключей (опосредованно)

В localStorage нет встроенного механизма срока действия (TTL), но можно имитировать его:

function setWithExpiry(key, value, ttl) {
  const item = {
    value: value,
    expiry: Date.now() + ttl
  };
  localStorage.setItem(key, JSON.stringify(item));
}

function getWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;
  
  const item = JSON.parse(itemStr);
  if (Date.now() > item.expiry) {
    localStorage.removeItem(key); // Удаление при истечении срока
    return null;
  }
  return item.value;
}

Важные нюансы:

• Данные привязаны к домену (протокол + домен + порт). https://example.com и http://example.com имеют разные хранилища.
• Данные сохраняются между сессиями — после закрытия и повторного открытия браузера.
• Синхронный API — операции localStorage блокируют основной поток, что может влиять на производительность при работе с большими данными.
• Только строковые данные — все значения хранятся как строки, необходимо использовать JSON.stringify() и JSON.parse() для объектов.

Рекомендации для разработчиков:

1. Всегда обрабатывайте ошибки при работе с localStorage:

try {
  localStorage.setItem('key', 'value');
} catch (e) {
  if (e.code === e.QUOTA_EXCEEDED_ERR) {
    // Обработка переполнения хранилища
    console.error('Хранилище переполнено');
  }
}

1. Учитывайте очистку пользователем — не полагайтесь на то, что данные гарантированно сохранятся.

2. Используйте полифиллы для старых браузеров (IE7 и ниже не поддерживают localStorage).

Таким образом, localStorage предоставляет постоянное хранилище на стороне клиента, которое очищается только при явных действиях пользователя, программиста или в специальных режимах браузера, что делает его надежным инструментом для хранения некритичных пользовательских данных и настроек.