ngx-indexed-database

ngx-indexed-database ships multiple angular services that ease your interaction with IndexedDB.
Its exposes various promise based method which boosts your productivity many times.

Usage

NgxIndexedDatabase module

Add NgxIndexedDatabaseModule into your NgModule imports:

import { NgxIndexedDatabaseModule } from "ngx-indexed-database";

@NgModule({
  ...
    imports: [ NgxIndexedDatabaseModule, ... ],
...
})

NgxIndexedDatabase service

Import and inject the service in the component where you want to handle store interaction.

import { NgxIndexedDatabaseService } from "ngx-indexed-database";

...
export class XYZComponent {
  constructor(private _ngxIndexedDBService: NgxIndexedDBService) {}
}

or

You can get instance of service using this:

const ngxIndexedDBService = NgxIndexedDBService.getInstance();

NgxIndexedDatabaseService provides two methods to create and delete data store.

Create

import { IndexedDBKeysDataType, IndexedDBStoreSchema, NgxIndexedDatabaseService } from "ngx-indexed-database";

...

const dbName = 'ngx-indexed-database';
const storeName = 'users';
const storeSchema: IndexedDBStoreSchema = {
  id: { primary: true, unique: true, datatype: IndexedDBKeysDataType.INTEGER },
  user_name: { datatype: IndexedDBKeysDataType.STRING },
  email: { datatype: IndexedDBKeysDataType.STRING },
};
this._ngxIndexedDBService.createStore(dbName, storeName, storeSchema);

Note: Whenever store schema is updated old store will be migrated to newer version.

Delete

import { IndexedDBKeysDataType, IndexedDBStoreSchema, NgxIndexedDatabaseService } from "ngx-indexed-database";

...

const dbName = 'ngx-indexed-database';
const storeName = 'users';
this._ngxIndexedDBService.deleteStore(dbName, storeName);

NgxIndexedDatabaseStoreOperations service

Import and inject the service in the component where you want to manipulate or access store data.

import { NgxIndexedDatabaseStoreOperationsService } from "ngx-indexed-database";

...
export class XYZComponent {
  constructor(private _ngxIndexedDatabaseStoreOperationsService: NgxIndexedDatabaseStoreOperationsService) {}
}

NgxIndexedDatabaseStoreOperationsService provides following methods:

upsert

Insert the new entries in store and update the existing one

const data = { id: 1, user_name: 'test123', email: 'test@test.com' }; 
this._ngxIndexedDatabaseStoreOperationsService.upsert(dbName, storeName, data);

delete

Delete the entry by primary key

this._ngxIndexedDatabaseStoreOperationsService.delete(dbName, storeName, 1);

deleteBy

Delete the entry by specific key

this._ngxIndexedDatabaseStoreOperationsService.deleteBy(dbName, storeName, "user_name", "test123");

clear

Remove all the entries from specified store

this._ngxIndexedDatabaseStoreOperationsService.clear(dbName, storeName);

find

Find the entry by primary key

this._ngxIndexedDatabaseStoreOperationsService.find(dbName, storeName, 1);

findBy

Delete the entry by specific key

this._ngxIndexedDatabaseStoreOperationsService.findBy(dbName, storeName, "user_name", "test123");

findMany

Find the entries by primary keys

this._ngxIndexedDatabaseStoreOperationsService.findMany(dbName, storeName, [1, 2, 3]);

findManyBy

Find the entries by specified key

this._ngxIndexedDatabaseStoreOperationsService.findManyBy(dbName, storeName, 'user_name', ['test123', 'test456']);

fetchAll

Return all the entries in specified store

this._ngxIndexedDatabaseStoreOperationsService.fetchAll(dbName, storeName);

resetStores

Clear data from all the stores in specified database.

this._ngxIndexedDatabaseStoreOperationsService.resetStores(dbName);

this._ngxIndexedDatabaseStoreOperationsService.resetStores(dbName, {
    exclude: ['ABC']
});

this._ngxIndexedDatabaseStoreOperationsService.resetStores(dbName, {
  only: ['DEF']
});

Enum

export enum IndexedDBKeysDataType {
  STRING,
  INTEGER,
  OBJECT,
  ARRAY,
  BOOLEAN,
  ANY
}

Interfaces

export interface IndexedDBStoreSchema {
  [key: string]: {
    primary?: boolean;
    unique?: boolean;
    datatype: IndexedDBKeysDataType
  }
}

Author

Harsh Mittal