How to use IndexedDB in Angular?
I use Dexie as it's a more mature and lightweight library and with all features.Compatible with VueJs, React, Angular and Vanilla JS
Alternative ngx-indexed-db
use ngx-indexed-db npm library:
npm install ngx-indexed-db
Import the NgxIndexedDBModule and initiate it:
import { NgxIndexedDBModule } from 'ngx-indexed-db';const dbConfig: DBConfig = { name: 'MyDb', version: 1, objectStoresMeta: [{ store: 'people', storeConfig: { keyPath: 'id', autoIncrement: true }, storeSchema: [ { name: 'name', keypath: 'name', options: { unique: false } }, { name: 'email', keypath: 'email', options: { unique: false } } ] }]};@NgModule({ ... imports: [ ... NgxIndexedDBModule.forRoot(dbConfig) ], ...})
Migrations:
import { NgxIndexedDBModule, DBConfig } from 'ngx-indexed-db';// Ahead of time compiles requires an exported function for factoriesexport function migrationFactory() { // The animal table was added with version 2 but none of the existing tables or data needed // to be modified so a migrator for that version is not included. return { 1: (db, transaction) => { const store = transaction.objectStore('people'); store.createIndex('country', 'country', { unique: false }); }, 3: (db, transaction) => { const store = transaction.objectStore('people'); store.createIndex('age', 'age', { unique: false }); } };}const dbConfig: DBConfig = { name: 'MyDb', version: 3, objectStoresMeta: [{ store: 'people', storeConfig: { keyPath: 'id', autoIncrement: true }, storeSchema: [ { name: 'name', keypath: 'name', options: { unique: false } }, { name: 'email', keypath: 'email', options: { unique: false } } ] }, { // animals added in version 2 store: 'animals', storeConfig: { keyPath: 'id', autoIncrement: true }, storeSchema: [ { name: 'name', keypath: 'name', options: { unique: true } }, ] }], // provide the migration factory to the DBConfig migrationFactory};@NgModule({ ... imports: [ ... NgxIndexedDBModule.forRoot(dbConfig) ], ...})
NgxIndexedDB serviceFirst, import the service:
import { NgxIndexedDBService } from 'ngx-indexed-db';... export class AppComponent { constructor(private dbService: NgxIndexedDBService){ } }
Easiest way to use IndexedDB. A lightweight, minimalistic wrapper that provides a straightforward API for developers using IndexedDB shared below a link