Cookie, localStorage, sessionStorage

Зачем нужно хранилище в браузере

HTTP не хранит состояние: сервер не знает, что запрос 2 пришёл от того же человека, что и запрос 1. А страница при перезагрузке начинает с нуля. Чтобы что-то «запомнить» — вход, корзину, настройки, наполовину заполненную форму, — нужно место, где данные сохраняются.

Браузер даёт 5 таких мест, у каждого своя задача.

Сравнение видов хранилища

Все они изолированы по origin: a.com не может прочитать то, что сохранил b.com.

Cookie

Cookie — это небольшой текст, который устанавливает сервер, а браузер автоматически отправляет обратно с каждым запросом к тому же сайту. Поэтому это единственный способ, которым сервер может вас узнать.

Set-Cookie: session=abc123; Max-Age=2592000; Path=/; HttpOnly; Secure; SameSite=Lax

Это приложение ставит cookie vid (httpOnly) — так оно узнаёт ваш прогресс на сервере без регистрации.

В Next cookie читают через cookies() из next/headers, а устанавливают в Server Actions, Route Handlers или proxy.ts.

localStorage

Хранилище ключ → строка, постоянное, общее для всех вкладок одного сайта.

localStorage.setItem('theme', 'dark')
localStorage.getItem('theme')                 // 'dark'
localStorage.removeItem('theme')

localStorage.setItem('cart', JSON.stringify(cart))   // объекты → JSON
const cart = JSON.parse(localStorage.getItem('cart') ?? '[]')

• Только строки — объекты проходят через JSON.stringify / JSON.parse.
• Синхронный API: блокирует поток; не сохраняйте мегабайты на каждое нажатие клавиши.
• Когда одна вкладка меняет localStorage, остальные вкладки получают событие storage — так синхронизируют тему между вкладками.

sessionStorage

Тот же API, что и у localStorage, но данные живут только пока жива вкладка:

sessionStorage.setItem('checkout-step', '2')
sessionStorage.getItem('checkout-step')       // '2' — только в этой вкладке

Когда он лучше localStorage: мастер оформления заказа или длинная форма, открытые в двух вкладках, — каждая вкладка хранит свой прогресс и не мешает другой.

IndexedDB

База данных в браузере: таблицы (object stores), индексы, транзакции, целые объекты (не только строки), файлы. API асинхронный (не блокирует страницу), но многословный — на практике используют небольшую обёртку:

import { get, set } from 'idb-keyval'
await set('drafts', [{ id: 1, text: '...' }])   // объекты напрямую, без JSON
const drafts = await get('drafts')

Для: офлайн-приложений, кэша больших данных, файлов пользователя до загрузки.

Cache Storage

Хранит целые пары запрос → ответ. Его используют service workers, чтобы сайт работал офлайн (PWA). В обычных приложениях вы редко трогаете его напрямую.

Правила безопасности

• Никогда не храните токены авторизации в localStorage / sessionStorage — любой скрипт на странице (включая внедрённый через XSS) может их прочитать. Сессия живёт в cookie с HttpOnly.
• Хранилище может выбросить ошибку (приватный режим, переполнение, заблокированные данные сайта) → оборачивайте каждое чтение / запись в try/catch.
• На сервере его нет: в Next читайте его только в Client Components после монтирования (в useEffect или useSyncExternalStore), иначе будут ошибки гидратации.
• Пользователь может очистить его в любой момент — это ненадёжное хранилище для важных данных.

Как выбрать

Коротко

• Cookie — единственное, что уходит на сервер автоматически; для сессий HttpOnly; Secure; SameSite=Lax.
• localStorage — постоянно, все вкладки; sessionStorage — на вкладку, до закрытия; оба только строки и синхронные.
• IndexedDB — для больших и офлайн-данных; никаких секретов в хранилище; всегда try/catch.

Официальные источники

• MDN — Using HTTP cookies
• MDN — Web Storage API
• MDN — Window.sessionStorage
• MDN — IndexedDB API
• MDN — CacheStorage