В чем разница между LocalStorage, SessionStorage и Cookies?

«В чем разница между LocalStorage, SessionStorage и Cookies?» — вопрос из категории Веб-тестирование, который задают на 24% собеседований AQA / Automation. Ниже — развёрнутый ответ с разбором ключевых моментов.

Тип вопроса: Веб-тестирование Вероятность: 24% Категория: AQA / Automation

Ответ

Это три основных механизма хранения данных на стороне клиента, и понимание их различий критично для тестирования веб-приложений (функциональность, безопасность, кросс-табличные сценарии).

Критерий	Cookies	LocalStorage	SessionStorage
Объем	~4 КБ на домен	~5-10 МБ на домен	~5-10 МБ на домен
Время жизни	Задается параметрами `Expires` или `Max-Age`. Могут быть сессионными (до закрытия браузера).	Сохраняются до явного удаления (JS или очистка браузера).	Удаляются при закрытии вкладки браузера.
Доступность	Доступны как на клиенте (`document.cookie`), так и на сервере (передаются в заголовках `Cookie` каждого HTTP-запроса).	Доступны только в контексте клиентского JavaScript (window.localStorage).	Доступны только в контексте клиентского JavaScript (window.sessionStorage) и только в рамках одной вкладки.
Использование в тестировании	Аутентификация (токены), отслеживание сессии, персонализация.	Сохранение больших непередаваемых на сервер данных (настройки UI, кэш данных).	Временное хранение данных в рамках одной сессии/вкладки (например, данные формы при переходе между шагами).

Практические сценарии для QA:

Тестирование Cookies (безопасность): Проверка флагов HttpOnly (защита от XSS), Secure (только по HTTPS), SameSite (защита от CSRF).

Тестирование LocalStorage:

// Проверка сохранения/загрузки данных
localStorage.setItem('theme', 'dark');
console.assert(localStorage.getItem('theme') === 'dark');
// Проверка очистки при логауте
logoutFunction(); // Должна вызывать localStorage.clear() или removeItem
console.assert(localStorage.getItem('theme') === null);

Тестирование SessionStorage (изоляция вкладок):
- Открыть приложение в двух вкладках.
- В первой вкладке сохранить данные: sessionStorage.setItem('wizardStep', '2').
- Убедиться, что во второй вкладке sessionStorage.getItem('wizardStep') вернет null.
- Закрыть и заново открыть вкладку — данные должны быть утеряны.
Очистка данных: Важно проверять, как приложение ведет себя после ручной очистки хранилища в настройках браузера — не должно приводить к критичным ошибкам.