Ответ
localStorage и sessionStorage — это Web Storage API, позволяющие хранить данные в браузере пользователя в формате «ключ-значение». Их основное различие — в времени жизни и области видимости.
Сравнительная таблица
| Критерий | localStorage | sessionStorage |
|---|---|---|
| Время жизни | Данные сохраняются бессрочно (до явного удаления JS, очистки кеша браузера или данных сайта). | Данные очищаются при закрытии вкладки браузера (сессия страницы). |
| Область видимости | Общий для всех вкладок и окон с одним доменом (происхождением). | Изолирован для каждой отдельной вкладки. Даже если открыть ту же страницу в новой вкладке — будет новое хранилище. |
| Лимит хранения | ~5-10 МБ на домен (зависит от браузера). | ~5-10 МБ на домен (зависит от браузера). |
Пример использования
// Запись данных
localStorage.setItem('userTheme', 'dark');
sessionStorage.setItem('formDraft', JSON.stringify({ name: 'John' }));
// Чтение данных
const theme = localStorage.getItem('userTheme'); // 'dark'
const draft = JSON.parse(sessionStorage.getItem('formDraft')); // {name: 'John'}
// Удаление данных
localStorage.removeItem('userTheme');
sessionStorage.clear(); // Очищает все данные текущей сессииКогда что использовать:
localStorage— для долгосрочных настроек пользователя (тема, язык), токенов (с осторожностью) или данных для офлайн-работы.sessionStorage— для временных данных сессии: ввод в форме с автозаполнением, состояние многошагового процесса, передача данных между страницами в рамках одной вкладки.