localStorage и sessionStorage #

Web Storage — два связанных хранилища в браузере: localStorage (данные живут, пока их не удалят) и sessionStorage (данные привязаны к вкладке и сессии). Оба хранят только строки; объекты нужно сериализовать.

Базовые операции #

API одинаков для обоих объектов:

localStorage.setItem('theme', 'dark')
localStorage.getItem('theme') // "dark"
localStorage.removeItem('theme')
localStorage.clear() // осторожно: удаляет всё для origin

Ключи уникальны в пределах origin. Значение 'undefined' и отсутствие ключа — разные вещи: getItem вернёт null, если ключа нет.

JSON и сложные данные #

const draft = {
  title: 'Черновик поста',
  tags: ['js', 'storage'],
  updatedAt: Date.now(),
}

localStorage.setItem('post-draft', JSON.stringify(draft))

const raw = localStorage.getItem('post-draft')
const restored = raw ? JSON.parse(raw) : null

Без JSON.stringify объект превратится в строку "[object Object]" — частая ошибка новичков.

Для больших структур учитывайте лимит (обычно около 5 МБ на origin) и стоимость синхронного парсинга при каждом чтении.

localStorage vs sessionStorage #

	localStorage	sessionStorage
Срок жизни	Пока не очистят вручную или через код	До закрытия вкладки
Общий доступ	Все вкладки одного origin	Только текущая вкладка
Типичное use case	Тема, язык, черновик формы	Данные мастера на одной странице

// вкладка A
sessionStorage.setItem('checkout-step', '2')

// новая вкладка того же сайта — ключа checkout-step нет
// обновление вкладки A — ключ сохранится

localStorage удобен для настроек UI; sessionStorage — для временного состояния, которое не должно «течь» в другие вкладки.

Событие storage #

Изменения localStorage в другой вкладке того же origin можно отловить событием storage (в той вкладке, где не вызывали setItem):

window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    document.documentElement.dataset.theme = event.newValue
  }
})

sessionStorage это событие не генерирует — данные изолированы по вкладке.

Ограничения и безопасность #

Только строки, синхронный API — блокирует main thread при больших объёмах.
Доступно любому скрипту на странице — не храните токены и пароли; для сессии сервер использует HttpOnly cookies.
Приватный режим — браузер может очистить storage при закрытии окна или отказать в записи.
Не замена серверной БД — пользователь может стереть данные в настройках.

// плохо
localStorage.setItem('accessToken', jwt)

// лучше: настройки интерфейса
localStorage.setItem('cart-collapsed', 'true')

Итог #

localStorage и sessionStorage — пар ключ–значение в браузере, API совпадает.
Хранятся только строки; объекты — через JSON.stringify / JSON.parse.
localStorage переживает перезагрузку и общий для вкладок origin; sessionStorage — только одна вкладка.
Не подходит для секретов; для чувствительных сессий — cookies с флагами сервера.