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

Разница между LocalStorage, SessionStorage и Cookies

LocalStorage, SessionStorage и Cookies — три основных механизма хранения данных на стороне клиента в веб-разработке. Хотя все они служат для сохранения информации в браузере, между ними есть фундаментальные различия в назначении, объёме, времени жизни и способе взаимодействия с сервером.

1. Cookies (Куки)

Куки — самый старый механизм, появившийся в 90-х годах. Они предназначены в первую очередь для работы серверной части приложения.

Характеристики:

• Объём хранения: Ограничены 4 КБ на домен.
• Время жизни: Устанавливается вручную через параметр max-age или expires. Могут быть сессионными (удаляются после закрытия браузера) или постоянными.
• Доступность: Автоматически отправляются на сервер с каждым HTTP-запросом в заголовках Cookie.
• Область видимости: Определяется доменом и путём, могут быть ограничены по безопасности (secure, httpOnly).
• API доступа: Доступны через document.cookie или на сервере.

// Установка куки
document.cookie = "username=John; max-age=3600; path=/; secure";

// Чтение всех кук
console.log(document.cookie); // "username=John; theme=dark"

2. LocalStorage (Локальное хранилище)

LocalStorage — часть Web Storage API, представленного в HTML5. Предназначен для хранения данных исключительно на стороне клиента.

Характеристики:

• Объём хранения: Обычно 5-10 МБ на домен (зависит от браузера).
• Время жизни: Данные сохраняются навсегда, пока их явно не удалят через JavaScript или пользователь не очистит кэш браузера.
• Доступность: Данные НЕ отправляются на сервер автоматически.
• Область видимости: Ограничены протоколом, доменом и портом (origin).
• API доступа: Простой API через localStorage.

// Сохранение данных
localStorage.setItem('userSettings', JSON.stringify({ theme: 'dark', language: 'ru' }));

// Получение данных
const settings = JSON.parse(localStorage.getItem('userSettings'));

// Удаление данных
localStorage.removeItem('userSettings');

3. SessionStorage (Сессионное хранилище)

SessionStorage — также часть Web Storage API, но с ключевым отличием в времени жизни данных.

Характеристики:

• Объём хранения: Обычно 5-10 МБ на домен.
• Время жизни: Данные существуют только в рамках одной вкладки/сессии браузера. При закрытии вкладки данные удаляются.
• Доступность: Данные НЕ отправляются на сервер автоматически.
• Область видимости: Ограничены не только origin, но и конкретной вкладкой браузера.
• API доступа: Аналогичен LocalStorage через sessionStorage.

// Сохранение данных сессии
sessionStorage.setItem('formData', JSON.stringify({ step: 3, values: { name: 'Anna' } }));

// Данные будут доступны только в текущей вкладке
console.log(sessionStorage.getItem('formData'));

Сравнительная таблица

Практическое применение в QA Automation

При автоматизации тестирования веб-приложений важно учитывать различия этих хранилищ:

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

// Пример проверки кук в Puppeteer
await page.setCookie({
  name: 'sessionId',
  value: 'abc123',
  domain: 'example.com'
});

// Проверка отправки кук на сервер
const cookies = await page.cookies();

Тестирование Web Storage:

// Проверка LocalStorage в Cypress
cy.window().then((win) => {
  win.localStorage.setItem('token', 'test-token');
  expect(win.localStorage.getItem('token')).to.equal('test-token');
});

// Очистка SessionStorage между тестами
beforeEach(() => {
  sessionStorage.clear();
});

Ключевые выводы для автоматизатора

1. Cookies нужны для аутентификации, сессий и отслеживания — проверяйте их безопасность (флаги httpOnly, secure).
2. LocalStorage идеален для хранения пользовательских настроек и кэширования данных — тестируйте сохранение после перезагрузки.
3. SessionStorage подходит для временных данных формы — убедитесь, что данные не "утекают" между вкладками.
4. Для кросс-вкладковой коммуникации используйте события storage, которые генерируются при изменении LocalStorage/SessionStorage.
5. Все три механизма уязвимы к XSS-атакам, поэтому не храните в них критически важные данные без шифрования.

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