Основные типы хранения данных в браузерах для QA-инженеров
Краткий ответ
В браузерах данные можно хранить через Cookies, Local Storage, Session Storage и IndexedDB. Каждый тип отличается по объёму, сроку хранения и возможностям работы с данными.
Развёрнуто
Краткий ответ
В браузерах существуют четыре ключевых механизма хранения данных: Cookies, Local Storage, Session Storage и IndexedDB. Они различаются по объёму, времени жизни и способам доступа к информации.
Как это работает
Cookies — маленькие текстовые файлы для хранения данных (обычно до 4 КБ), которые браузер отправляет с каждым HTTP-запросом. Используются для хранения информации о сессиях, настройках пользователя или трекинга.
Local Storage — часть Web Storage API, предоставляющая возможность сохранять пары ключ-значение объёмом до нескольких мегабайт. Данные сохраняются бессрочно, пока не будут удалены вручную.
Session Storage — также часть Web Storage API, похож на Local Storage, но данные живут только в рамках одной сессии браузера и удаляются при закрытии вкладки.
IndexedDB — асинхронная, транзакционная база данных в браузере для хранения больших и сложных структур данных, включая объекты и бинарные файлы. Позволяет выполнять запросы и индексацию.
| Механизм | Объём | Время хранения | Особенности |
|---|---|---|---|
| Cookies | ~4 КБ | Зависит от срока | Отправляются с каждым HTTP-запросом |
| Local Storage | Несколько МБ | Постоянно | Доступны на всех вкладках домена |
| Session Storage | Несколько МБ | Только сессия | Данные исчезают при закрытии вкладки |
| IndexedDB | Много, зависит от браузера | Постоянно | Поддержка транзакций и сложных структур |
Пример
// Сохранение данных в Local Storage
localStorage.setItem('user', JSON.stringify({name: 'Ivan', role: 'QA'}));
// Получение данных из Session Storage
const token = sessionStorage.getItem('sessionToken');
// Использование Cookies
document.cookie = "sessionId=abc123; path=/; max-age=3600";
// Открытие IndexedDB и создание объекта хранилища
const request = indexedDB.open('MyDatabase', 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
db.createObjectStore('users', { keyPath: 'id' });
};
Пример показывает, как использовать различные типы хранения для разных задач.
Что важно знать на собеседовании
- Разница в объёме и сроках хранения данных между Cookies, Local Storage и Session Storage.
- Cookies передаются с каждым запросом на сервер, что влияет на производительность.
- IndexedDB подходит для больших и сложных данных, в отличие от остальных механизмов.
- Session Storage ограничен одной вкладкой браузера и удаляется при её закрытии.
- Знание этих механизмов помогает тестировать поведение приложений при хранении пользовательских данных.
Тема: Web-тестирование и DevTools | Уровень: middle