Javascript 如何在Angular中使用IndexedDB?

Javascript 如何在Angular中使用IndexedDB?,javascript,database,angular,reactjs,typescript,Javascript,Database,Angular,Reactjs,Typescript,是否有某种材料可以在角度上使用indexedDB?我正在寻找一些可以帮助我在data rescue或更好的应用程序中实现的东西,一个位于浏览器中的数据库,尽管它不是localstore,因为它有5 MB的限制使用IndexedDB的最简单方法。一个轻量级、简约的包装器,为使用链接下共享的IndexedDB的开发人员提供了一个简单的API 使用ngx索引的db npm库: npm install ngx-indexed-db 导入NgxIndexedDBModule并启动它: import {

是否有某种材料可以在角度上使用indexedDB?我正在寻找一些可以帮助我在data rescue或更好的应用程序中实现的东西,一个位于浏览器中的数据库,尽管它不是localstore,因为它有5 MB的限制使用IndexedDB的最简单方法。一个轻量级、简约的包装器,为使用链接下共享的IndexedDB的开发人员提供了一个简单的API


使用ngx索引的db npm库:

npm install ngx-indexed-db
导入NgxIndexedDBModule并启动它:

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)
  ],
  ...
})
迁移:

import { NgxIndexedDBModule, DBConfig } from 'ngx-indexed-db';

// Ahead of time compiles requires an exported function for factories
export 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服务 首先,导入服务:

import { NgxIndexedDBService } from 'ngx-indexed-db';

...
  export class AppComponent {
    constructor(private dbService: NgxIndexedDBService){
    }
  }
我使用它,因为它是一个更成熟、更轻量级的库,具有所有功能。 与VueJs、React、Angular和Vanilla JS兼容


可供选择的

用于需要安装的angular中的Dexie。

您可以像使用任何其他框架一样使用它。周围有许多库。本机API并不像它可能的那样直观,使用库使它变得更简单查看本文-我使用了DexiesJs:D