Когда вы делаете сайт, иногда нужно сохранить какую-то информацию прямо в браузере пользователя. Например, настройки темы, корзину в интернет-магазине или просто текст, который человек вводил в форме. Можно, конечно, таскать всё на сервер, но это медленно и неудобно. Тут на сцену выходят LocalStorage и SessionStorage — два простых инструмента, которые живут прямо в браузере. В этой статье я объясню, как они работают, чем отличаются и как не наступить на грабли, когда вы решите их использовать.

Digital-студия WNDER

Что такое Web Storage и зачем он нужен?

Web Storage — это такой «карман» в браузере, куда можно положить данные и достать их потом, даже если пользователь закрыл вкладку или перезагрузил страницу. В отличие от cookies (маленьких файлов, которые тоже хранят данные), Web Storage имеет гораздо больший лимит — около 5-10 мегабайт, и не отправляет данные на сервер автоматически. Это значит, что всё остаётся на устройстве пользователя, и вы сами решаете, когда с этим работать.

LocalStorage и SessionStorage — это два способа использовать этот «карман». Они похожи, но ведут себя по-разному. Давайте разберём каждый.

LocalStorage: данные, которые живут вечно

Представьте, что вы положили заметку в ящик письменного стола. Вы можете закрыть ящик, уйти на год, вернуться — и заметка всё ещё там. Так работает LocalStorage. Данные в нём хранятся бессрочно, пока вы сами их не удалите или пользователь не очистит кэш браузера.

Использовать LocalStorage очень просто. Вот базовые методы:

// Сохранить значение
localStorage.setItem('username', 'Иван');

// Получить значение
const user = localStorage.getItem('username');
console.log(user); // 'Иван'

// Удалить конкретный ключ
localStorage.removeItem('username');

// Полностью очистить хранилище
localStorage.clear();

Обратите внимание: в LocalStorage можно хранить только строки. Если вы хотите сохранить объект или массив, сначала превратите его в JSON-строку.

const settings = {
  theme: 'dark',
  fontSize: 16
};

// Сохраняем объект как строку JSON
localStorage.setItem('settings', JSON.stringify(settings));

// Читаем и превращаем обратно в объект
const savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(savedSettings.theme); // 'dark'

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

SessionStorage: для данных на один заход

SessionStorage работает как блокнот, который вы выбрасываете, как только закрываете вкладку. Он хранит данные только в течение текущей сессии — то есть пока открыта конкретная вкладка браузера. Закрыли вкладку — всё стёрлось. Открыли новую — с чистого листа.

Методы у SessionStorage точно такие же, как у LocalStorage:

// Сохранить
sessionStorage.setItem('draft', 'Черновик статьи');

// Прочитать
const draft = sessionStorage.getItem('draft');
console.log(draft); // 'Черновик статьи'

// Удалить
sessionStorage.removeItem('draft');

// Очистить всё
sessionStorage.clear();

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

Таблица сравнения: LocalStorage vs SessionStorage

Чтобы было нагляднее, вот таблица отличий:

Критерий LocalStorage SessionStorage
Время жизни Хранится бессрочно, пока не удалить вручную Умирает при закрытии вкладки
Доступность Доступен во всех вкладках одного домена Доступен только в той вкладке, где создан
Лимит Обычно 5-10 МБ на домен Обычно 5-10 МБ на вкладку
Тип данных Только строки (но можно JSON) Только строки (но можно JSON)
Пример использования Настройки темы, сохранение корзины Черновики, временные состояния

Как видите, разница в основном в «жизненном цикле» данных. Выбирайте то, что подходит под вашу задачу.

Практические советы и лайфхаки

Теперь пара советов, которые уберегут вас от типичных ошибок.

Правило: Всегда проверяйте, существует ли ключ, перед тем как читать данные. Если ключа нет, getItem вернёт null, и это может сломать ваш код, если вы попытаетесь сделать JSON.parse(null).

Вот пример безопасного чтения:

function getSettings() {
  const raw = localStorage.getItem('settings');
  if (raw === null) {
    // Возвращаем значения по умолчанию
    return { theme: 'light', fontSize: 14 };
  }
  try {
    return JSON.parse(raw);
  } catch (e) {
    // Если JSON повреждён, тоже возвращаем дефолт
    return { theme: 'light', fontSize: 14 };
  }
}

Ещё один лайфхак: если вы храните большие объёмы данных, следите за лимитом. Попытка записать больше, чем позволяет браузер, вызовет исключение QuotaExceededError. Оберните запись в try...catch, чтобы не ронять всю страницу.

try {
  localStorage.setItem('bigData', hugeString);
} catch (e) {
  console.error('Не удалось сохранить данные:', e);
  // Предложите пользователю почистить хранилище
}

И ещё: не храните в LocalStorage или SessionStorage пароли или токены доступа. Эти данные доступны любому скрипту на странице, а значит, есть риск кражи через XSS-атаки. Для чувствительных данных используйте серверные механизмы.

Итоговое резюме

Итак, что мы выяснили:

  • LocalStorage и SessionStorage — это простые способы хранить данные в браузере.
  • LocalStorage подходит для долгосрочного хранения, SessionStorage — для временного.
  • Оба хранят только строки, поэтому объекты и массивы нужно сериализовать в JSON.
  • Не забывайте проверять наличие данных и обрабатывать ошибки записи.
  • Никогда не храните конфиденциальную информацию в этих хранилищах.

Теперь вы знаете, как использовать LocalStorage и SessionStorage на практике. Идите и экспериментируйте — это безопасно, если соблюдать простые правила.

Студия WNDER