如何在 Angular 中使用 IndexedDB?
How to use IndexedDB in Angular?
是否有某个地方 material 可以在 Angular 中使用 indexedDB?我正在寻找可以帮助我实现数据救援或更好的东西,一个位于浏览器中的数据库,尽管由于 5 MB 的限制它不是本地存储
使用 IndexedDB 的最简单方法。一个轻量级、简约的包装器,为使用 IndexedDB 的开发人员提供了一个简单的 API 在 link
下共享
使用 ngx-indexed-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){
}
}
我使用 Dexie,因为它是一个更成熟、更轻量级的库,并且具有所有功能。
与 VueJs、React、Angular 和 Vanilla JS
兼容
备选方案ngx-indexed-db
要在 angular 中使用 Dexie,您需要安装 Dexie.Observable。
是否有某个地方 material 可以在 Angular 中使用 indexedDB?我正在寻找可以帮助我实现数据救援或更好的东西,一个位于浏览器中的数据库,尽管由于 5 MB 的限制它不是本地存储
使用 IndexedDB 的最简单方法。一个轻量级、简约的包装器,为使用 IndexedDB 的开发人员提供了一个简单的 API 在 link
下共享使用 ngx-indexed-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){
}
}
我使用 Dexie,因为它是一个更成熟、更轻量级的库,并且具有所有功能。 与 VueJs、React、Angular 和 Vanilla JS
兼容备选方案ngx-indexed-db
要在 angular 中使用 Dexie,您需要安装 Dexie.Observable。