Что такое localStorage и sessionStorage и чем отличаются?
localStorage и sessionStorage
Оба объекта являются частью Web Storage API и позволяют хранить строковые данные в браузере на стороне клиента без участия сервера.
localStorage
- Данные сохраняются бессрочно — не удаляются при закрытии вкладки или браузера.
- Доступен во всех вкладках и окнах одного и того же origin (протокол + домен + порт).
- Очищается только явно через код или вручную пользователем через DevTools.
sessionStorage
- Данные живут только пока открыта вкладка — при закрытии вкладки хранилище уничтожается.
- Изолирован по вкладкам: даже две вкладки с одним URL имеют разные sessionStorage.
- Сохраняется при перезагрузке страницы (F5), но не при закрытии.
Общие характеристики
- Оба хранят данные в формате строк (
string). Объекты нужно сериализовывать черезJSON.stringify/JSON.parse. - Объём: обычно 5 МБ на origin (зависит от браузера).
- Одинаковый синхронный API:
setItem,getItem,removeItem,clear,key,length. - Недоступны в
Web WorkerиService Worker. - Не передаются на сервер (в отличие от Cookie).
Сравнительная таблица
| Критерий | localStorage | sessionStorage |
|---|---|---|
| Время жизни | Постоянно | До закрытия вкладки |
| Область видимости | Все вкладки одного origin | Только текущая вкладка |
| Размер | ~5 МБ | ~5 МБ |
| Очистка | Вручную или через код | Автоматически при закрытии |
Код
См. примеры ниже.
Когда что использовать
- localStorage — тема оформления, язык интерфейса, токен авторизации (если нет httpOnly-cookie), пользовательские настройки.
- sessionStorage — данные многошагового формы, временный черновик, состояние wizard-а в рамках одной сессии.
Важные ограничения
- Оба хранилища синхронны — большие операции блокируют главный поток.
- Данные доступны любому JS на странице — не хранить чувствительные данные (пароли, токены с широкими правами).
- При использовании в SSR (Next.js, Nuxt) обращаться только на клиенте, иначе
window is not defined.
Что хочет услышать интервьюер
Кандидат чётко называет главное отличие: время жизни данных и изоляция по вкладкам
Знает, что оба хранилища работают только со строками и понимает необходимость JSON.stringify/parse для объектов
Понимает ограничения по объёму (~5 МБ) и синхронность API
Может назвать практические сценарии применения каждого хранилища
Осознаёт риски безопасности: доступность данных любому JS-коду на странице
Пример: Базовый API localStorage и sessionStorage
// --- localStorage: данные сохраняются между сессиями ---
// Запись строки
localStorage.setItem('theme', 'dark');
// Чтение
const theme = localStorage.getItem('theme'); // 'dark'
// Запись объекта (обязательна сериализация)
const user = { id: 1, name: 'Иван' };
localStorage.setItem('user', JSON.stringify(user));
// Чтение объекта
const storedUser = JSON.parse(localStorage.getItem('user') ?? 'null');
console.log(storedUser?.name); // 'Иван'
// Удаление конкретного ключа
localStorage.removeItem('theme');
// Очистка всего хранилища
localStorage.clear();
// --- sessionStorage: данные живут до закрытия вкладки ---
sessionStorage.setItem('step', '2');
const step = sessionStorage.getItem('step'); // '2'
// При открытии той же страницы в новой вкладке — sessionStorage пуст
// (каждая вкладка имеет собственный изолированный sessionStorage)
// --- Безопасная обёртка для SSR (Next.js / Nuxt) ---
function safeLocalStorage() {
if (typeof window === 'undefined') return null;
return window.localStorage;
}
const storage = safeLocalStorage();
storage?.setItem('key', 'value');
Типичные ошибки
Путают sessionStorage с серверной сессией — sessionStorage существует только в браузере и не связан с серверной сессией
Забывают, что sessionStorage изолирован по вкладкам, и считают, что данные видны всем вкладкам
Не используют JSON.stringify/parse при записи и чтении объектов, получая '[object Object]'
Думают, что перезагрузка страницы удаляет sessionStorage — на самом деле нет, удаляет только закрытие вкладки
Хранят чувствительные данные (пароли, секретные токены) в localStorage, не учитывая уязвимость к XSS
AI-тренажеры
Практика в студии
4.8
