Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке indexedDB?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

> **IndexedDB** - це низькорівневе API для зберігання даних у браузері,
> яке дозволяє створювати **об'єктні сховища (object stores)**, виконувати **запити**, **індексацію** та **транзакції**.

Простіше кажучи:
IndexedDB - це **міні-база даних у браузері**, яка працює на клієнті.
Вона зберігає дані **на диск**, тому не очищається після перезапуску вкладки чи браузера.

---

## 1. Основні особливості IndexedDB

| Можливість | Опис |
|---|---|
| **Зберігає об'єкти, а не рядки** | Можна зберігати цілі JS-об'єкти без ручної серіалізації |
| **Працює асинхронно** | Через проміси або колбеки |
| **Підтримує індекси** | Можна швидко шукати дані за ключами |
| **Використовує транзакції** | Операції виконуються атомарно |
| **Підтримує версіонування** | Кожне оновлення БД супроводжується зміною версії |
| **Зберігання великих даних** | Можна зберігати десятки мегабайт і навіть бінарні файли (Blob, ArrayBuffer) |

---

## 2. Приклад створення і використання IndexedDB

```javascript
// 1. Відкриваємо (або створюємо) базу даних
const request = indexedDB.open('myDatabase', 1);

// 2. Подія при першому створенні БД
request.onupgradeneeded = (event) => {
  const db = event.target.result;

// Створюємо "object store" (аналог таблиці)
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

// 3. При успішному відкритті
request.onsuccess = (event) => {
  const db = event.target.result;

// Додаємо запис
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  store.add({ id: 1, name: 'Tim', age: 25 });

tx.oncomplete = () => console.log('Дані збережено!');
};
```

Тут:

- `open('myDatabase', 1)` - створює або відкриває базу даних версії `1`;
- `createObjectStore('users')` - створює сховище для об'єктів (аналог таблиці);
- `keyPath: 'id'` - вказує, що поле `id` буде унікальним ключем;
- `transaction('users', 'readwrite')` - створює транзакцію для запису.

---

## 3. Читання даних

```javascript
const request = indexedDB.open('myDatabase', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readonly');
  const store = tx.objectStore('users');

const userRequest = store.get(1);

userRequest.onsuccess = () => {
    console.log('Користувач:', userRequest.result);
  };
};
```

---

## 4. Робота з індексами

```javascript
const request = indexedDB.open('myDatabase', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readonly');
  const store = tx.objectStore('users');
  const index = store.index('name');

const req = index.get('Tim');
  req.onsuccess = () => console.log('Знайдено:', req.result);
};
```

Індекси дозволяють шукати не лише за `keyPath`, а й за будь-яким полем об'єкта.

---

## 5. Видалення і оновлення

```javascript
// Оновлення
store.put({ id: 1, name: 'Tim', age: 26 });

// Видалення
store.delete(1);
```

---

## 6. Робота з Promises (через обгортку)

Браузерне API IndexedDB громіздке.
Для зручності часто використовують бібліотеку **idb** (офіційна обгортка від Google):

```javascript
import { openDB } from 'idb';

const db = await openDB('myDatabase', 1, {
  upgrade(db) {
    db.createObjectStore('users', { keyPath: 'id' });
  },
});

await db.put('users', { id: 1, name: 'Tim' });
const user = await db.get('users', 1);
console.log(user);
```

Бібліотека `idb` робить IndexedDB приємним у використанні через `async/await` і проміси.

---

## 7. IndexedDB vs localStorage

| Властивість | **IndexedDB** | **localStorage** |
|---|---|---|
| Обсяг | До сотень МБ | ~5 МБ |
| Тип даних | Об'єкти, файли, Blob | Лише рядки |
| Асинхронність | Так | Ні |
| Швидкість | Швидше при великих обсягах | Повільніше |
| Пошук за ключем | Є індекси | Лише прямий доступ |
| Використання | Кеш, офлайн-застосунки, PWA | Прості налаштування і токени |

---

## Підсумок

| Параметр | Опис |
|---|---|
| API | Асинхронне, подієве |
| Зберігає | Об'єкти, файли, бінарні дані |
| Основна структура | Object Store (аналог таблиці) |
| Використовує | Транзакції, індекси |
| Де застосовується | PWA, офлайн-сховища, кеш даних, застосунки без сервера |

---

> **Запам'ятай просто:**
> IndexedDB - це **"база даних прямо в браузері"**,
> де можна зберігати **багато даних, як у SQL**,
> але у форматі **JavaScript-об'єктів**.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати622 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.