Ответ
Браузеры предоставляют несколько API для хранения данных на клиенте, различающихся по объему, времени жизни и структуре.
Основные механизмы:
| Механизм | Объем | Время жизни | Структура | Назначение |
|---|---|---|---|---|
Cookies |
~4 КБ | Задается вручную (expires/max-age) или сессия | Строка (key=value) | Хранение небольших данных для сервера (сессии, токены). Автоматически отправляются с HTTP-запросами. |
Web Storage |
~5-10 МБ | |||
• localStorage |
Постоянно (до явного удаления) | Ключ-значение (строки) | Постоянное хранение пользовательских настроек (тема, язык). | |
• sessionStorage |
До закрытия вкладки | Ключ-значение (строки) | Временное хранение данных в рамках одной сессии/вкладки. | |
IndexedDB |
До 50% свободного места | Постоянно | NoSQL-хранилище (объекты) | Хранение больших объемов структурированных данных (офлайн-кэш, файлы). |
Cache API |
Зависит от квоты | Постоянно | Пары Request/Response | Кэширование сетевых запросов и ресурсов для работы Offline и PWA. |
Примеры использования:
1. Cookies (установка с сервера или клиента):
// Установка cookie (клиентская)
document.cookie = "sessionId=abc123; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/; Secure";
// Примечание: Работа с document.cookie неудобна, лучше использовать библиотеки.2. Web Storage (простой API):
// localStorage
localStorage.setItem('userTheme', 'dark');
const theme = localStorage.getItem('userTheme'); // 'dark'
localStorage.removeItem('userTheme');
// sessionStorage (аналогичный API)
sessionStorage.setItem('formDraft', JSON.stringify({ field1: 'value' }));3. IndexedDB (сложный API, используется с промисами):
// Открытие базы данных
const request = indexedDB.open('MyDatabase', 1);
request.onsuccess = (event) => {
const db = event.target.result;
// ... операции с объектными хранилищами (object stores)
};
// Используйте библиотеки (idb, Dexie.js) для упрощения работы.Ключевое для тестирования: Проверяйте корректность сохранения/чтения, обработку квот, поведение в режиме инкогнито (где данные могут очищаться), и влияние на производительность.
Ответ 18+ 🔞
А, слушай, вот эта тема про хранилища в браузере — это же просто песня, блядь! Сидишь такой, думаешь: «Ну куда я тут сохраню свои кривые настройки?» А оказывается, вариантов — овердохуища! Но каждый, сука, со своими подводными камнями, как будто специально, чтобы нас, разработчиков, выбесить.
Смотри, вот тебе расклад по полочкам, но без этой скучной официальщины.
Основные игроки на поле:
| Штука | Сколько влезет | Сколько проживёт | Что внутри | Зачем оно вообще? |
|---|---|---|---|---|
Cookies |
~4 КБ, как записочка | Задаёшь сам или до закрытия браузера | Просто строка ключ=значение |
Шпионить за пользователем, блядь! Шутка. Ну, для сессий, токенов. Главная фишка — летят на сервер с каждым запросом сами, как назойливые мухи. |
Web Storage |
~5-10 МБ, уже лучше | |||
• localStorage |
Пока вручную не удалишь или пользователь не почистит | Ключ-значение, но только строки | Хранить что-то постоянное: тему, язык, логин. Просто и тупо. | |
• sessionStorage |
Пока вкладку не закроешь — потом пиздец, всё пропало | Тоже ключ-значение, строки | Временный склад для данных одной вкладки. Обновил страницу — ещё живёт. Закрыл — в рот меня чих-пых! | |
IndexedDB |
Дохуя! (50% от свободного места) | Постоянно | Настоящая NoSQL база, объекты | Когда нужно запихнуть в браузер гигабайты всякого хлама: офлайн-кэш, файлы, результаты выборки. Мощно, но API — просто ёперный театр! |
Cache API |
Зависит от квоты, но тоже немало | Постоянно | Пары «Запрос-Ответ» (Request/Response) | Чтобы приложение работало офлайн, сука! Кэшируешь картинки, скрипты, HTML — и потом можешь хвастаться, что у тебя PWA. |
А теперь, блядь, как этим пользоваться на практике:
1. Куки (Cookies) Старые добрые кукисы. API у них — просто пиздец какой древний и неудобный.
// Запихнуть куку (с клиента)
document.cookie = "auth_token=secret123; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/; Secure";
// Честно, работать с этим через `document.cookie` — это как гвозди микроскопом забивать.
// Бери библиотеку, не мучайся.2. Веб-сторедж (Web Storage) Тут всё просто, как три копейки. Идеально для мелких настроек.
// localStorage — переживёт ядерную зиму
localStorage.setItem('ui_theme', 'dark');
const savedTheme = localStorage.getItem('ui_theme'); // 'dark'
// Удалить? Легко!
localStorage.removeItem('ui_theme');
// sessionStorage — живёт один таб, как бабочка-однодневка
sessionStorage.setItem('unsaved_form_data', JSON.stringify({ name: 'Вася', drunk: true }));3. IndexedDB Вот тут начинается настоящая магия и боль одновременно. Нативный API — это просто вынос мозга.
// Попытка открыть базу
const openRequest = indexedDB.open('MyAwesomeDB', 1);
openRequest.onsuccess = (event) => {
const db = event.target.result;
// Ура, база открылась! Теперь можно начинать страдать...
// Создавать хранилища, класть туда объекты, искать их...
};
// Совет от сердца: НИКОГДА не пиши на чистом IndexedDB API, если ты не мазохист.
// Бери обёртку — `idb` или `Dexie.js`. Сохранишь себе кучу нервных клеток, блядь.На что орать при тестировании:
- Работает ли вообще? Сохранил — перезагрузил — прочитал. Ожидаемое == полученное.
- Квоты, сука! Что будет, если пытаться запихнуть 100 МБ в
localStorage? Правильно — тебе выкинут ошибку. Обрабатывай её! - Режим инкогнито. Там, блядь, всё может просто испаряться после закрытия окна. Не рассчитывай на надёжность.
- Производительность. Особенно с IndexedDB. Не делай тысячу мелких записей, если можно одной пачкой.
Вот и вся наука. Выбирай инструмент по задаче, а не потому что он модный. И да пребудет с тобой терпение, когда полезешь в дебри IndexedDB!