Назвіть способи зберігання даних у браузері. Порівняйте їх.

Повне пояснення

Що це і навіщо

• LocalStorage / SessionStorage – простий key/value store, доступний через window.localStorage/sessionStorage. Працює синхронно, обмежений 5 МБ на домен.
• Cookies – також key/value, але надсилаються серверу з кожним HTTP‑запитом; обмеження 4 КБ, підтримка атрибутів HttpOnly, Secure.
• IndexedDB – асинхронний NoSQL‑store, підтримує транзакції, індекси, обробку великих даних (до сотень мегабайт).
• WebSQL – застарілий, не підтримується новими браузерами.

Ключові принципи/терміни

• Scope: LocalStorage – глобальний для домену, SessionStorage – за вкладкою, Cookies – за доменом/піддоменом.
• Lifetime: LocalStorage постійний, SessionStorage – до закриття вкладки, Cookies мають expires/max-age.
• API: синхронний (setItem, getItem) vs асинхронний (open, transaction).

Як це працює

• При записі в LocalStorage/SessionStorage браузер зберігає рядок у локальну базу даних (IndexedDB‑подібна). При читанні виконується синхронний доступ.
• Cookies формуються у заголовку Set-Cookie і зберігаються в кеші браузера; при кожному запиті додаються у заголовок Cookie.
• IndexedDB відкриває базу через indexedDB.open(), створює об’єктні сховища (objectStore) і виконує транзакції.

Практика та реалізація

// LocalStorage
localStorage.setItem('token', 'abc123');
const token = localStorage.getItem('token');

// SessionStorage
sessionStorage.setItem('temp', 'data');

// Cookies (js-cookie)
Cookies.set('user', 'john', { expires: 7, secure: true });

// IndexedDB (idb)
import { openDB } from 'idb';
const db = await openDB('my-db', 1, {
  upgrade(db) { db.createObjectStore('items'); }
});
await db.put('items', { id: 1, name: 'foo' }, 1);

Тестування

• Для LocalStorage/SessionStorage: jest-localstorage-mock.
• Для Cookies: js-cookie mock або @testing-library/react-hooks з renderHook.
• Для IndexedDB: fake-indexeddb або idb-mock.

Безпека та приватність

• Cookies з HttpOnly недоступні через JS, захищають від XSS.
• LocalStorage/SessionStorage доступний скриптам; слід шифрувати чутливі дані.
• IndexedDB не надсилається серверу, але доступний через скрипти; слід обмежувати права.

Переваги/Недоліки

• LocalStorage: простий, швидкий, але обмежений розмір і синхронний.
• SessionStorage: підходить для тимчасових даних, не зберігається після закриття вкладки.
• Cookies: потрібні для аутентифікації, але збільшують розмір запиту.
• IndexedDB: підходить для великих даних, складні запити, але API громіздкий.

Часті помилки

1. Перевищення розміру LocalStorage → QuotaExceededError.
2. Зберігання паролів у LocalStorage → XSS‑ризик.
3. Неочікуване видалення SessionStorage при закритті вкладки.
4. Cookies без Secure піддаються перехопленню.
5. IndexedDB транзакції без await → непередбачувані результати.
6. Використання WebSQL у нових проектах → непідтримка.
7. Неочікуване оновлення Cookies через SameSite=Lax → CSRF.
8. Зберігання великих об’єктів у LocalStorage → блокування UI.

Cheatsheet

• localStorage.setItem(key, value) – синхронно.
• sessionStorage.getItem(key) – синхронно, видаляється при закритті вкладки.
• Cookies.set(name, value, { expires: days }) – HTTP‑запит.
• indexedDB.open(name, version) + транзакції – асинхронно.

Follow‑up питання

• Які обмеження розміру для Cookies і як їх уникнути?
• Як забезпечити безпечне зберігання токенів у браузері?