Управление localStorage в JS: проверка и установка значений

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

Воспользуйтесь методом getItem для проверки элемента в Storage, который вернёт null, если указанный элемент отсутствует.

if (localStorage.getItem('ключ') !== null) {
  // Элемент присутствует в хранилище!
} else {
  // Элемента в хранилище нет.
}

Установка значения по умолчанию за одну строчку кода

Если необходимо задать значение по умолчанию для не найденного элемента, можно применить логический оператор ИЛИ и сократить код до одной строки:

const item = localStorage.getItem('ключ') || 'значение по умолчанию';

Применение возможностей современного JavaScript для оптимизации кода

Сделайте свой код компактнее и более элегантным с помощью функционала современного JavaScript:

• Опциональная цепочка (?.) поможет избежать ошибки TypeError, если localStorage недоступен.
• Оператор нулевого объединения (??) облегчит проверку на null или undefined.

const item = localStorage.getItem('ключ') ?? 'значение по умолчанию';

Будьте внимательны к распространенным ошибкам

Использование .hasOwnProperty() или оператора 'in' с localStorage противоречит концепции работы с хранилищем, как и проверка через typeof. Для проверки существования элемента отдайте предпочтение методу getItem().

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

Рассмотрим аналогию между проверкой элемента в Storage и просмотром почтового ящика:

Проверка почтового ящика:
- Почтовый ящик: 📬 Пуст ли он? | Письмо: ✉️

Проверка элемента в Storage:
- LocalStorage: 🗄️ Пуст ли? | Элемент: 📦

if (localStorage.getItem('ключ') !== null) {
    // 🗄️🔍📦: Элемент найден!
} else {
    // 🗄️ пуст.
}

Предотвращение ошибок и валидация

Перед внесением изменений убедитесь в том, что элемент действительно существует.

if(localStorage.getItem('ключ')) {
  // Можно начинать действия.
}

Помимо этого, localStorage не обладает бесконечной вместимостью — есть лимит на объём хранимых данных. Чрезмерное использование setItem может привести к исчерпанию этого лимита.

try {
  localStorage.setItem('ключ', 'значение'); // Попытка добавить еще один элемент.
} catch (e) {
  if (e instanceof DOMException && e.code === 22) {
    // Хранилище переполнено!
  }
}

Управление LocalStorage на профессиональном уровне

Эффективность и простота — ключи к мастерству использования localStorage. Вот некоторые продвинутые приемы:

Задаем значения с экономией

// Добавляем несколько элементов с помощью одной команды.
localStorage.setItem('ключ1', 'значение1').setItem('ключ2', 'значение2');

Подробнее об этом расскажет наш спикер на видео

Удаляем данные разборчиво

// Удаляем элементы методично, по одному.
if (localStorage.getItem('someKey')) {
  localStorage.removeItem('someKey');  // Прощай, someKey.
}

Полная очистка

// Перепрофилирование и начало с чистого листа — всегда хорошая идея.
if(confirm('Желаете очистить хранилище?')) {
  localStorage.clear(); // localStorage теперь пуст.
}

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

1. Web Storage API – Веб-API | MDN — подробное описание Веб-API хранилища от MDN.
2. Как проверить установлен ли элемент в Storage – Stack Overflow — обсуждение тонкостей работы с local storage на Stack Overflow.
3. LocalStorage, sessionStorage – JavaScript.info — практическое руководство по использованию localStorage и sessionStorage.
4. Локальное хранилище и его использование на сайтах — Smashing Magazine — советы о том, как использовать LocalStorage на ваших сайтах максимально эффективно.
5. HTML Web Storage API – W3Schools — руководство по API веб-хранилищ HTML5 от W3Schools.
6. Learn PWA | web.dev — материалы Google о принципах хранения данных в приложениях.
7. Куки, localStorage и sessionStorage – YouTube — видеоанализ различий между куками, localStorage и sessionStorage от Beau.