Вы когда-нибудь задумывались, куда браузер сохраняет настройки сайтов, корзину товаров или тёмную тему? Всё это — работа с хранилищами. В этой статье разберём два простых и мощных инструмента: LocalStorage и SessionStorage. Вы узнаете, как они устроены, чем отличаются, и получите практические примеры использования.

Digital-студия WNDER

Что такое LocalStorage и SessionStorage

Оба хранилища — это встроенные в браузер механизмы для сохранения данных в виде пар «ключ-значение». Они работают как обычный объект JavaScript, но данные остаются в браузере даже после перезагрузки страницы или закрытия вкладки (для LocalStorage).

LocalStorage хранит данные бессрочно — пока вы их не удалите или не очистите кеш браузера. SessionStorage живёт только в рамках текущей сессии: закрыли вкладку — данные пропали. Это как блокнот (LocalStorage) и стикер на мониторе (SessionStorage).

Оба хранилища привязаны к источнику (origin): протокол + домен + порт. Данные с одного сайта не видны другому.

Основные методы: читаем, пишем, удаляем

API у обоих хранилищ одинаковый. Вот основные методы:

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

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


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

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

// Удаляем
localStorage.removeItem('user');

Для SessionStorage используется точно такой же код, только вместо localStorage пишем sessionStorage.

Сравнение LocalStorage и SessionStorage

Чтобы было нагляднее, сведём различия в таблицу.

Характеристика LocalStorage SessionStorage
Время жизни Бессрочно (до очистки) До закрытия вкладки
Область видимости Все вкладки и окна с тем же origin Только текущая вкладка
Размер (обычно) 5-10 МБ 5 МБ
Синхронизация между вкладками Да, через событие storage Нет
Правило: не храните в LocalStorage и SessionStorage конфиденциальные данные (пароли, токены, персональную информацию). Эти хранилища доступны любому скрипту на странице, поэтому уязвимы к XSS-атакам.

Практические примеры использования

Где же применять эти хранилища в реальной разработке? Вот несколько сценариев.

  • Сохранение темы оформления. Пользователь выбрал тёмную тему — сохраняем в LocalStorage и при следующем визите применяем.
  • Корзина покупок. Если не требуется синхронизация с сервером, можно хранить товары локально.
  • Черновики форм. SessionStorage отлично подходит для сохранения введённых данных, чтобы не потерять их при случайном обновлении страницы.
  • Кеширование данных. Например, сохранить ответ API, чтобы не делать повторный запрос.

Пример: переключатель темы с сохранением выбора.


// Проверяем сохранённую тему
const currentTheme = localStorage.getItem('theme') || 'light';
document.body.className = currentTheme;

// По клику на кнопку меняем тему и сохраняем
const toggleBtn = document.getElementById('theme-toggle');
toggleBtn.addEventListener('click', () => {
  const newTheme = document.body.className === 'light' ? 'dark' : 'light';
  document.body.className = newTheme;
  localStorage.setItem('theme', newTheme);
});

Ещё пример: сохранение черновика формы в SessionStorage.


const textarea = document.getElementById('message');
const savedText = sessionStorage.getItem('draft');
if (savedText) {
  textarea.value = savedText;
}

textarea.addEventListener('input', () => {
  sessionStorage.setItem('draft', textarea.value);
});

А вот как можно отслеживать изменения LocalStorage в других вкладках:


window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    document.body.className = event.newValue;
  }
});

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

Несмотря на простоту, у хранилищ есть ограничения.

  • Только строки. Объекты и массивы нужно сериализовать через JSON.stringify.
  • Синхронность. Операции с LocalStorage и SessionStorage блокируют основной поток. Не стоит хранить большие объёмы данных и часто к ним обращаться.
  • Размер. Обычно 5 МБ на origin. При превышении выбрасывается исключение QuotaExceededError.
  • Безопасность. Данные не шифруются и доступны любому скрипту на странице. Не храните чувствительную информацию.
  • Отсутствие в Web Workers. SessionStorage недоступен в воркерах, LocalStorage — тоже (но есть IndexedDB).
Лайфхак: если нужно сохранить большой объём данных или структурированную информацию, используйте IndexedDB. LocalStorage и SessionStorage хороши для небольших настроек и временных данных.

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

Что в итоге

LocalStorage и SessionStorage — простые и удобные инструменты для хранения данных на клиенте. LocalStorage подходит для долговременного хранения настроек, SessionStorage — для временных данных в рамках одной сессии. Оба имеют ограничения по размеру и безопасности, поэтому используйте их с умом. А для сложных задач присмотритесь к IndexedDB.

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

Студия WNDER