Ответ
- LocalStorage – хранит данные без срока действия, доступен только в виде строк.
localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');- SessionStorage – аналогичен LocalStorage, но данные очищаются при закрытии вкладки.
sessionStorage.setItem('key', 'value');- Cookies – небольшие текстовые данные (до 4KB), передаются на сервер с каждым запросом.
document.cookie = 'key=value; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/';- IndexedDB – NoSQL-хранилище для больших объемов структурированных данных.
const request = indexedDB.open('dbName', 1);- Cache API – используется для хранения ресурсов (например, для оффлайн-работы PWA).
caches.open('cache-v1').then(cache => cache.add('/asset.js'));-
Web SQL (устарел) – SQL-база данных в браузере, не поддерживается в новых браузерах.
-
Service Worker Cache – часть Cache API, но управляется через Service Worker.
Выбор зависит от: объема данных, необходимости синхронизации с сервером и срока хранения.
Ответ 18+ 🔞
А, ну вот, классика, блядь! Сидишь такой, пишешь фронтенд, и тут — бац! — надо данные куда-то деть, чтобы они не испарились, как твоя зарплата после получения. Слушай, вариантов-то, оказывается, овердохуища! Разбираем, что к чему, но без фанатизма.
1. LocalStorage — это как твой старый дедовский сундук на чердаке. Засунул туда что-то — и оно лежит, пока сам не выкинешь или пользователь не почистит хранилище. Только строки туда, сука, всё в строки! Хочешь объект запихнуть — JSON.stringify, иначе будет пиздец.
localStorage.setItem('mySecret', 'абрикос');
const secret = localStorage.getItem('mySecret'); // вернёт 'абрикос'2. SessionStorage — тот же сундук, но в номере отеля. Закрыл вкладку — всё, конец истории, уборщица всё выкинула. Удобно для временного дерьма, которое после сессии нахуй не нужно.
sessionStorage.setItem('tempToken', 'qwerty123');3. Cookies — старые, добрые, ёбаные печеньки. Маленькие (всего 4 КБ), зато с каждым запросом на сервер лезут, как назойливые мухи. Срок жизни им можно выставить, путь указать. Без них, блядь, авторизацию представить сложно.
document.cookie = 'sessionId=abc123; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/';4. IndexedDB — это уже не сундук, а целый складской комплекс, ёпта! NoSQL база прямо в браузере. Хочешь гигабайты структурных данных хранить — пожалуйста. Но код, блядь, выглядит так, будто ты на ассемблере пишешь.
const request = indexedDB.open('myHugeDB', 1);5. Cache API — это для тех, кто делает PWA и хочет, чтобы сайт грузился, даже когда интернет накрылся медным тазом. Туда скрипты, стили, картинки можно закинуть.
caches.open('my-cache-v1').then(cache => cache.add('/main.js'));6. Web SQL — да похуй, честно. Устарел, как кассетный магнитофон. Ни один современный браузер его не поддерживает, забудь, как страшный сон.
7. Service Worker Cache — по сути, тот же Cache API, но управляется через сервис-воркер, этакого подпольного диспетчера. Мощная штука, но надо головой думать.
Короче, выбор, блядь, зависит от трёх вещей: сколько данных (от печеньки до склада), надо ли их серверу пихать при каждом чихе, и как долго они должны жить. Не усложняй, если можно просто в localStorage строку запихнуть, а то потом сам от себя охуеешь с этой IndexedDB.