IndexedDB представляет собой низкоуровневый браузерный API для работы с локальной базой данных. Он предоставляет полный контроль над транзакциями, индексами, курсорами и структурой хранения. Это мощный инструмент, но его API сложен, многословен и требует ручного управления асинхронностью, схемами и ошибками.
localForage — это высокоуровневая абстракция над несколькими механизмами хранения (IndexedDB, WebSQL, localStorage). Она скрывает сложность выбора backend’а и предоставляет унифицированный Promise-based API для работы с ключ-значение хранилищем.
Ключевая разница заключается в уровне абстракции:
Работа с IndexedDB требует создания базы, версии, объектного хранилища и обработки событий:
const request = indexedDB.open('app-db', 1);
request.onupgradenee ded = function (event) {
const db = event.target.result;
db.createObjectStore('users', { keyPath: 'id' });
};
request.onsucc ess = function (event) {
const db = event.target.result;
const tx = db.transaction('users', 'readwrite');
const store = tx.objectStore('users');
store.put({ id: 1, name: 'Alex' });
};Характерные особенности:
Эквивалентная операция в localForage:
import localforage from 'localforage';
localforage.setItem('user:1', { id: 1, name: 'Alex' });Чтение:
localforage.getItem('user:1').then((value) => {
console.log(value);
});Особенности:
IndexedDB поддерживает:
Это приближает его к полноценным NoSQL базам.
Пример индексированного поиска:
const store = db.createObjectStore('users', { keyPath: 'id' });
store.createIndex('nameIndex', 'name');
const index = store.index('nameIndex');
index.get('Alex');localForage намеренно ограничивает модель данных:
localforage.setItem('settings', {
theme: 'dark',
lang: 'ru'
});Нет индексов, нет запросов, нет фильтрации на стороне хранилища.
Преимущества:
Недостатки:
Преимущества:
Недостатки:
request.onsucc ess = () => {};
request.oner ror = () => {};localforage.getItem('key')
.then(value => {})
.catch(err => {});или async/await:
const value = await localforage.getItem('key');Ошибки требуют явной обработки на каждом уровне:
request.oner ror = (event) => {
console.error(event.target.error);
};Ошибки централизованы:
localforage.setItem('key', value)
.catch(err => console.error(err));или через try/catch:
try {
await localforage.setItem('key', value);
} catch (e) {
console.error(e);
}onupgradeneededrequest.onupgradenee ded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users');
}
};Это делает IndexedDB гибким, но сложным для поддержки эволюции данных.
Изменения структуры данных выполняются на уровне приложения:
const user = await localforage.getItem('user:1');
const migrated = {
...user,
createdAt: user.createdAt || Date.now()
};
await localforage.setItem('user:1', migrated);Подходит для:
Подходит для:
автоматически выбирает backend:
Это обеспечивает:
driver и
serializerПолный контроль:
Подходит для системного уровня работы с данными.
Ограниченный контроль:
Подходит как слой абстракции, а не как полноценная БД.
localForage:
await localforage.setItem('api:/users', data);IndexedDB:
Вывод: localForage быстрее внедряется.
IndexedDB:
namelocalForage:
Вывод: IndexedDB значительно эффективнее.
IndexedDB:
localForage:
IndexedDB:
localForage:
Разница определяется не только API, но и философией: