Сховище браузера: cookie, LocalStorage, SessionStorage та IndexedDB
У браузері є кілька типів вбудованого зберігання даних, які можна використовувати для збереження стану користувача, кешу, налаштувань тощо.
Основні типи зберігання
| Зберігання | Об'єм | Доступність | Тривалість | Відправляється на сервер | Підтримка |
|---|---|---|---|---|---|
| Cookie | ~4 KB | Сервер і клієнт | Залежить від Expires | Так | Усі браузери |
| LocalStorage | ~5–10 MB | Тільки клієнт | До видалення | Ні | Усі браузери |
| SessionStorage | ~5–10 MB | Тільки клієнт | Поки вкладка відкрита | Ні | Усі браузери |
| IndexedDB | 100+ MB | Тільки клієнт | До видалення | Ні | Усі браузери |
Cookie
- Дозволяють переносити дані між клієнтом і сервером
- Використовуються для авторизації, сесій, персоналізації
- Відправляються в кожному HTTP запиті, тому повинні бути компактними
- Налаштовуються через заголовок
Set-Cookieабоdocument.cookie
js
document.cookie = "theme=dark; path=/; max-age=3600";LocalStorage
- Підходить для довгострокового зберігання даних (тема, токени, налаштування)
- Доступний тільки на клієнті
- Переживає перезапуск браузера
js
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
localStorage.removeItem("theme");SessionStorage
- Схожий на
localStorage, але існує тільки в межах однієї вкладки - Після закриття вкладки — дані видаляються
js
sessionStorage.setItem("step", "2");
sessionStorage.getItem("step");IndexedDB
- Асинхронна база даних у браузері (ключ-значення + індекси)
- Дозволяє зберігати структуровані об'єкти, навіть файли
- Підходить для офлайн-перших додатків, PWA, великих даних
js
const db = indexedDB.open("MyDB", 1);Легше використовувати через обгортки:
Коли використовувати що?
| Сценарій | Рекомендоване зберігання |
|---|---|
| Авторизація, токени | cookie (з прапорами Secure + HttpOnly) |
| Налаштування користувача | localStorage |
| Тимчасові дані | sessionStorage |
| Офлайн кеш даних, PWA | indexedDB |
Безпека:
Ніколи не зберігайте токени доступу в LocalStorage або SessionStorage, якщо їх можна вкрасти через XSS. Використовуйте HttpOnly cookie.
Висновок
- Використовуйте
cookieдля передачі між клієнтом і сервером - Використовуйте
localStorageдля постійних даних клієнта - Використовуйте
sessionStorageдля тимчасових, одноразових даних - Використовуйте
IndexedDBдля складного та великого зберігання
Зміст
Основні типи зберіганняCookieLocalStorageSessionStorageIndexedDBКоли використовувати що?Висновок
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.