Local storage и Session storage — это браузерные хранилища, куда фронтенд может записывать небольшие данные без запроса к серверу.
Здесь часто лежат настройки интерфейса, черновики форм, технические флаги, временные состояния и иногда данные, которым там не место.
В обоих хранилищах данные сохраняются по ключу и значению. Главное отличие — сколько живут данные и где они доступны.
Local storage
Local storage подходит для состояния, которое должно оставаться после закрытия вкладки или браузера.
Хранится до ручной очистки, очистки браузера или удаления кодом приложения.
Доступно всем вкладкам одного origin: совпадают протокол, домен и порт.
Настройки интерфейса, цветовая схема, язык.
Session storage
Session storage подходит для состояния, которое нужно только в пределах текущей вкладки.
Сохраняется после перезагрузки страницы.
Доступно только текущей вкладке и очищается после ее закрытия.
Текущий шаг формы, временные фильтры, одноразовые подсказки в рамках вкладки.
| Проверка | Local storage | Session storage |
|---|---|---|
| Перезагрузка страницы | остается | остается |
| Закрытие вкладки | остается | очищается |
| Новая вкладка того же сайта | остается | очищается |
| Очистка через DevTools или код | очищается | очищается |
Задайте ключи и значения, сохраните их. Затем откройте DevTools и найдите эти же пары в хранилищах.
-
-
Откройте эту страницу в новой вкладке: Local storage будет доступен, а Session storage очистится.
Важно: токены, пароли, паспортные данные, банковские данные и другие чувствительные значения не должны храниться в браузерном хранилище.
Уровень повышен!
