Local Storage
Что это: Хранилище типа "ключ-значение", которое хранит данные бессрочно, пока они не будут удалены вручную или через код.
Живут до...
Никогда. Данные постоянны.
Объем
~5-10 МБ
Что обычно хранят: Настройки интерфейса (например, theme: 'dark'), JWT-токены, данные, которые должны "пережить" закрытие браузера, содержимое корзины в интернет-магазине.
Где найти: DevTools → Application → Storage → Local Storage
Как тестировать:
- Убедиться, что данные сохраняются после закрытия и повторного открытия браузера.
- Проверить, что данные доступны во всех вкладках одного и того же сайта.
- Проверить, что происходит при достижении лимита хранилища.
- Вручную очистить хранилище и проверить, что сайт сбросился к состоянию по умолчанию.
Session Storage
Что это: Аналог Local Storage, но данные существуют только в рамках одной сессии (одной вкладки). При закрытии вкладки данные удаляются.
Живут до...
Закрытия вкладки/браузера.
Объем
~5-10 МБ
Что обычно хранят: Данные, введенные в многошаговую форму (чтобы не потерялись при перезагрузке страницы), временные фильтры или состояние сортировки на странице.
Где найти: DevTools → Application → Storage → Session Storage
Как тестировать:
- Проверить, что данные удаляются после закрытия вкладки.
- Убедиться, что данные НЕ доступны в другой вкладке, даже если там открыт тот же сайт.
- Проверить, что данные сохраняются при перезагрузке страницы (F5).
Browser Cache
Что это: Место, где браузер хранит копии статичных файлов (картинки, CSS, JS), чтобы не скачивать их заново при повторном посещении сайта.
Живут до...
Зависит от заголовков сервера (Cache-Control).
Объем
~50-300+ МБ
Что обычно хранят: Логотипы, иконки, CSS-стили, JS-библиотеки (например, React или jQuery), шрифты — все, что редко меняется и ускоряет загрузку сайта.
Где найти: DevTools → Network → колонка "Size" (искать "from disk cache" / "from memory cache")
Как тестировать:
- Проверить, что после обновления CSS/JS файла на сервере клиент получает новую версию (cache busting).
- Использовать "жесткую перезагрузку" (Ctrl+Shift+R), чтобы убедиться, что сайт работает с чистым кэшем.
- Проверить в DevTools, что статические ресурсы загружаются из кэша при повторном визите.
IndexedDB
Что это: Полноценная NoSQL база данных внутри браузера для хранения больших объемов структурированных данных. Идеальна для приложений, работающих офлайн.
Живут до...
Никогда. Данные постоянны.
Объем
~1 ГБ+
Что обычно хранят: Содержимое email-клиента для офлайн-доступа, черновики документов в онлайн-редакторах, большие объемы данных для сложных веб-приложений.
Где найти: DevTools → Application → Storage → IndexedDB
Как тестировать:
- Проверить базовые CRUD-операции (создание, чтение, обновление, удаление данных).
- Протестировать работу приложения в офлайн-режиме (вкладка Network → Offline).
- Проверить, как приложение обрабатывает обновление версии базы данных.
