Ответ
Вкладка Storage в инструментах разработчика браузера (DevTools) — это панель для инспекции, управления и отладки всех видов клиентских хранилищ данных.
Как открыть: F12 → вкладка Application (в Chrome/Edge) или Storage (в Firefox) → раздел Storage.
Что можно увидеть и делать:
-
Local Storage / Session Storage
- Просмотр всех пар ключ-значение для текущего origin.
- Добавление, редактирование и удаление записей в реальном времени.
- Полезно для отладки состояния приложения.
-
Cookies
- Список всех cookies для текущего домена.
- Просмотр атрибутов: имя, значение, срок жизни, флаги (
HttpOnly,Secure,SameSite). - Возможность удалить отдельные cookie.
-
IndexedDB
- Просмотр NoSQL-баз данных и их объектных хранилищ (object stores).
- Инспекция записей, выполнение запросов.
-
Cache Storage
- Просмотр кэшей, созданных Service Workers (из Cache API).
- Можно увидеть закэшированные ресурсы (HTML, CSS, JS, изображения).
Практическое применение для отладки:
// Код приложения сохраняет токен
localStorage.setItem('authToken', 'abc123.xyz.789');- Откройте DevTools → Application → Local Storage.
- Найдите свой домен и убедитесь, что ключ
authTokenприсутствует со значениемabc123.xyz.789. - Можно изменить значение прямо в таблице для тестирования разных сценариев.
Эта вкладка незаменима для анализа проблем, связанных с персистентностью данных, работой PWA (Progressive Web Apps) и отладкой механизмов кэширования.
Ответ 18+ 🔞
Вот же ж, ну и замудрили, блядь, с этими хранилищами в браузере! Сидит разработчик, пыхтит, а данные куда-то хуяк — и нету. А они тут, сука, все как на ладони, только знать надо, где копать.
Где эта панелька прячется? Жмёшь свою любимую F12, ищешь вкладку Application (в Хроме и Эдже) или Storage (в этом упоротом Фаерфоксе). Там, блядь, целый склад данных открывается.
И что там можно узреть, а?
-
Local Storage / Session Storage Смотришь — а там, сука, список, как в конторской книге: ключ и значение. Всё, что твоё приложение туда навтыкало. И самое офигенное — можно прямо там, на ходу, ебнуть запись, добавить новую или поменять старую. Отладка состояния приложения — просто пиздец как удобно, в рот меня чих-пых!
-
Cookies А вот и наши старые друзья — кукисы. Все до единого, для этого домена. И не просто имя-значение, а вся подноготная: когда сдохнет, флаги всякие (
HttpOnly,Secure). Захотел — взял и удалил одну, гадскую, которая всё ломает. Красота, ёпта! -
IndexedDB Это уже для продвинутых, блядь. Целые NoSQL-базы, объектные хранилища. Залез, посмотрел, что там внутри наворочено, записи инспектанул. Как будто в чужой холодильник заглянул, только с данными.
-
Cache Storage А это, сука, для тех, кто с Service Workers'ами балуется. Все кэши, которые воркер натырил (картинки, скрипты, стили). Глянешь — и сразу ясно, почему оффлайн-режим не пашет: то ли не закэшировалось нихуя, то ли не туда.
Пример из жизни, чтоб понятнее было: Допустим, в коде у тебя какая-то хуйня:
// Код приложения сохраняет токен
localStorage.setItem('authToken', 'abc123.xyz.789');А оно не работает. Не авторизуется и всё. Вместо того, чтобы в консоли тыкаться, делаешь так:
F12→ Application → Local Storage.- Ищешь свой сайт в списке и — охуеть! — ключа
authTokenлибо нет, либо значение не то. - А можно прямо в таблице его значение поменять на другое и проверить, как приложение отреагирует. Волшебство, блядь!
В общем, эта вкладка — настоящая палочка-выручалочка, когда нужно понять, куда данные деваются, почему PWA глючит или где кэш схоронился. Незаменимая хуйня, короче.