Що таке LocalStorage і SessionStorage? Який максимальний розмір LocalStorage?

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

Що це і навіщо

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

Ключові принципи

• API: setItem(key, value), getItem(key), removeItem(key), clear(). Значення зберігаються як рядки.
• Синхронний доступ, тому не слід виконувати довгі обчислення в колбеках.
• Обмеження розміру: 5 МБ на домен (може бути 10 МБ у Chrome, 2–3 МБ у Safari). Якщо перевищити, QuotaExceededError.

Як це працює

• Дані зберігаються у IndexedDB‑подібному сховищі, доступному через window.
• При збереженні значення конвертується в рядок за допомогою String(value).
• При отриманні повертається той самий рядок, тому часто використовується JSON.stringify/JSON.parse.

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

// Зберігання об’єкта
localStorage.setItem('user', JSON.stringify({id: 1, name: 'Ivan'}));

// Отримання
const user = JSON.parse(localStorage.getItem('user')!);

Тестування

• Jest: можна мокати localStorage за допомогою jest.spyOn(window, 'localStorage', 'get').mockReturnValue({ ... });.
• Vitest: vi.stubGlobal('localStorage', { getItem: vi.fn(), setItem: vi.fn() });.

Безпека

• Дані не шифруються; будь‑який користувач може переглянути їх через DevTools.
• Не зберігайте конфіденційні токени; використовуйте HttpOnly cookie.

Оптимізація

• Уникайте великих об’єктів; розділяйте дані на менші ключі.
• Перевіряйте localStorage.length перед записом, щоб уникнути помилок.

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

1. QuotaExceededError – перевищено розмір.
2. JSON.parse(undefined) – спроба парсити null.
3. Синхронність – блокування UI при великому записі.
4. Крос‑домен – доступ лише до того домену, що його створив.
5. Відсутність підтримки – старі браузери (IE < 10) не мають.
6. Проблеми з кешуванням – зміни не відображаються миттєво.
7. Проблеми з видаленням – clear() очищує всі ключі, не лише ваші.
8. Проблеми з типами – getItem повертає string | null, треба перевіряти.

Чек‑лист діагностики

• Помилка при записі → перевірте розмір, очистіть localStorage.
• Невідповідність даних → переконайтеся, що парсинг/стрінгфікація коректна.
• Відсутність даних → перевірте, чи не очищується sessionStorage після закриття вкладки.

Альтернативи

• IndexedDB: більший розмір, асинхронний API.
• Cookies: менш простий, але підтримується сервером.
• Service Worker Cache API: для кешування ресурсів.