Що таке indexedDB?

JavaScriptMiddle~2 хв читання

Визначення

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-об'єктів.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.