Вы когда-нибудь теряли прогресс в онлайн-игре, случайно закрыв вкладку? Или заполняли длинную форму, а при обновлении страницы все поля очищались? Локальное хранилище браузера решает эти проблемы. В этой статье я расскажу, как сохранять данные прямо в браузере пользователя без сервера, и покажу примеры на JavaScript.

Digital-студия WNDER

Что такое локальное хранилище и зачем оно нужно

Локальное хранилище — это как записная книжка в браузере. Вы кладёте туда данные, а браузер их запоминает. Даже если закрыть вкладку или перезагрузить компьютер, информация останется. Это удобно для сохранения настроек темы, черновиков форм, корзины товаров и многого другого.

В JavaScript есть два основных инструмента: localStorage и sessionStorage. Они похожи, но работают по-разному. localStorage хранит данные бессрочно (пока пользователь сам не удалит), а sessionStorage — только пока открыта вкладка. Закрыли вкладку — данные пропали.

Раньше для таких задач использовали куки (cookies), но у них есть недостатки: маленький размер (около 4 КБ), они отправляются на сервер с каждым запросом, что замедляет работу. Локальное хранилище даёт больше места (обычно 5-10 МБ) и не грузит сеть.

Как пользоваться localStorage: основные методы

Работать с localStorage проще простого. Это объект с четырьмя основными методами:

  • setItem(key, value) — сохранить значение по ключу.
  • getItem(key) — получить значение по ключу.
  • removeItem(key) — удалить пару ключ-значение.
  • clear() — очистить всё хранилище.

Важно: и ключи, и значения всегда строки. Если хотите сохранить объект или массив, используйте JSON.stringify() и JSON.parse().

Пример сохранения и чтения:

// Сохраняем строку
localStorage.setItem('username', 'Иван');

// Читаем
const name = localStorage.getItem('username');
console.log(name); // 'Иван'

// Сохраняем объект
const user = { name: 'Иван', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// Читаем объект
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // 'Иван'

Всё просто. Но есть нюансы. Например, если попытаться прочитать несуществующий ключ, getItem вернёт null. А если сохранить число, оно станет строкой.

Сравнение localStorage, sessionStorage и куки

Чтобы выбрать подходящий инструмент, давайте сравним их в таблице.

Характеристика localStorage sessionStorage Куки (cookies)
Время жизни Бессрочно До закрытия вкладки Задаётся при установке
Объём 5-10 МБ 5-10 МБ ~4 КБ
Отправка на сервер Нет Нет Да, с каждым запросом
Доступность из JS Да Да Да (если не HttpOnly)

Как видите, для клиентского хранения больших данных лучше использовать localStorage или sessionStorage. Куки больше подходят для аутентификации.

Практические примеры и лайфхаки

Давайте посмотрим, как применить локальное хранилище в реальных сценариях.

Пример 1: Сохранение темы оформления. Пользователь выбирает тёмную тему, и она запоминается.

// При загрузке страницы проверяем сохранённую тему
const theme = localStorage.getItem('theme');
if (theme === 'dark') {
  document.body.classList.add('dark-theme');
}

// При переключении темы сохраняем выбор
function toggleTheme() {
  document.body.classList.toggle('dark-theme');
  const isDark = document.body.classList.contains('dark-theme');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

Пример 2: Черновик формы. Автосохранение введённого текста, чтобы не потерять при случайном закрытии.

const textarea = document.getElementById('message');

// Восстанавливаем черновик при загрузке
textarea.value = localStorage.getItem('draft') || '';

// Сохраняем при вводе (с задержкой, чтобы не дёргать хранилище слишком часто)
let timeout;
textarea.addEventListener('input', () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    localStorage.setItem('draft', textarea.value);
  }, 500);
});
Правило: Всегда проверяйте, доступно ли локальное хранилище. В некоторых браузерах (например, в режиме инкогнито) оно может быть отключено. Оберните вызовы в try-catch. 
function isLocalStorageAvailable() {
  try {
    localStorage.setItem('test', 'test');
    localStorage.removeItem('test');
    return true;
  } catch (e) {
    return false;
  }
}

Ещё один лайфхак: не храните в localStorage пароли, номера кредитных карт и другие чувствительные данные. Хранилище не шифруется и доступно любому скрипту на странице.

Ограничения и подводные камни

Локальное хранилище — не серебряная пуля. У него есть ограничения:

  • Синхронность. Операции чтения и записи блокируют основной поток. Не храните огромные объёмы данных и не делайте это слишком часто.
  • Объём. Обычно 5-10 МБ на домен. Если превысить, браузер выбросит исключение.
  • Безопасность. Данные видны в инструментах разработчика. Никакого шифрования.
  • Кросс-доменность. Данные привязаны к источнику (протокол + домен + порт). Сайт example.com не увидит данные с site.com.

Также помните, что localStorage не работает в Web Workers. Для них есть IndexedDB.

Что в итоге

Локальное хранилище — простой и мощный инструмент для сохранения данных на клиенте. Используйте localStorage для долговременного хранения (настройки, черновики), sessionStorage — для временных данных в рамках вкладки. Избегайте хранения конфиденциальной информации. И всегда проверяйте доступность хранилища.

Надеюсь, статья была полезной. Экспериментируйте, и пусть ваши данные не теряются!

Студия WNDER