Ответ
IndexedDB — это NoSQL база данных в браузере, позволяющая хранить большие объемы структурированных данных на стороне клиента. В отличие от localStorage, поддерживает транзакции, индексы и асинхронные операции.
Ключевые особенности:
- Работает в основном потоке, но не блокирует UI (асинхронный API)
- Хранит данные в виде пар ключ-значение
- Поддерживает сложные запросы через индексы
- Лимит хранилища зависит от браузера (обычно 50-80% от свободного места на диске)
Пример использования:
const request = indexedDB.open('MyDatabase', 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
const store = db.createObjectStore('books', { keyPath: 'id' });
store.createIndex('by_title', 'title', { unique: false });
};
request.onsuccess = (event) => {
const db = event.target.result;
const tx = db.transaction('books', 'readwrite');
const store = tx.objectStore('books');
store.add({ id: 1, title: 'JavaScript: The Good Parts' });
};Ответ 18+ 🔞
А, IndexedDB, ну это ж, блядь, такая штука в браузере, как будто настоящая база данных, только на твоём компе сидит! Нет, ну серьёзно, это не та хрень, где куки или localStorage, где ты только строки запихнуть можешь. Это, ёпта, NoSQL-монстр, который может в себя засунуть овердохуища данных — картинки, объекты, целые архивы.
В чём прикол, если по-простому:
- Работает она асинхронно, то есть пока она там ковыряется в своих файлах, интерфейс у тебя не встаёт колом. Не то что этот ваш синхронный кошмар.
- Хранит всё по принципу «ключ — какое-то, блядь, значение». Как шкаф с ящиками, только ящики можно называть как угодно.
- Можно строить индексы, чтобы потом не перерывать всю эту свалку в поисках одной записи. Умно, да?
- А лимиты там, сука, щедрые! Браузер обычно отгрызает себе приличный кусок от свободного места на диске — процентов 50-80. Так что можно нахуярить приложение, которое и офлайн всё покажет.
Смотри, как этим пользоваться, на живом примере:
// Открываем базу, или создаём, если её нет. 'MyDatabase' — имя, 1 — версия.
const request = indexedDB.open('MyDatabase', 1);
// А вот это событие — святое. Выполнится, если база впервые создаётся или версия обновилась.
request.onupgradeneeded = (event) => {
const db = event.target.result; // Вот она, наша база!
// Создаём "таблицу" (object store) для книг. Ключом будет поле 'id'.
const store = db.createObjectStore('books', { keyPath: 'id' });
// А это индекс по названию, чтобы быстро искать. Уникальным не делаем — книг с одним названием может быть дохуя.
store.createIndex('by_title', 'title', { unique: false });
};
// Всё открылось, ура!
request.onsuccess = (event) => {
const db = event.target.result;
// Начинаем транзакцию. 'readwrite' — значит, можем и писать.
const tx = db.transaction('books', 'readwrite');
// Получаем доступ к нашему хранилищу книг.
const store = tx.objectStore('books');
// И хуяк — добавляем первую книжку!
store.add({ id: 1, title: 'JavaScript: The Good Parts' });
};Вот и вся магия. Сначала кажется, что ебаный огород с этими событиями, но привыкаешь. Главное — не пытайся в неё синхронно лезть, а то мозг сломаешь. Она же асинхронная, пиздец!