Why not record in an indexedDB database?

In the Angular app using the cache on the basis of IndexedDB. Watch a performance issue. No entry in DB, do not understand the reason. Attempting to read the object is given an empty array. Here is the source code.

export class AppComponent implements OnInit {
 private _totalTime: number = 0;
 private _writeCount: number;
 private _readCount: number;
 private _db: any;
 private _books: any;

 constructor(private _httpService: HttpClient) {
}

ngOnInit() {
 let req = indexedDB.open('store', 2);
 req.onupgradeneeded = () => { 
 this._db = req.result;
 if (!this._db.objectStoreNames.contains('store')) {
this._db.createObjectStore('stations');
}
};
 req.onsuccess = () => {
 this._db = req.result;
}
}

 save() {
 let stations: any;
 let transaction: any;
this._httpService.get(`/scripts/getStations.php`).subscribe(
 (resp: any) => {
 transaction = this._db.transaction('stations', "readwrite");
 stations = transaction.objectStore('stations');
 let i = 0;
 resp.forEach((item: any) => {
i++;
 stations.add(item, i);
});
transaction.commit();
});
}

 read() {
 let transaction = this._db.transaction('stations', "readonly");
 let stations = transaction.objectStore('stations');
 let request = stations.getAll();
 request.onsuccess = function () {
 if (request.result !== undefined) {
 console.log("read data =", request.result);
}
 else {
 console.log("read Error");
}
};
 };


What are you doing wrong ? Thank you.
April 4th 20 at 13:18
1 answer
April 4th 20 at 13:20
In appearance everything seems OK, you have debajit, pererasti somewhere in the sandbox.
Until I can offer the wrapper to indexedDB, it seems to work, haven't tested properly. Can you suggest a meditation.
DbService

export interface DbConfig {
 /** prefix for indexed db name */
 name: string;
 /** keyPath in indexed db */
 keyPath?: string;
 /** keyPath of indexed db */
 objectName: string;
}

@Injectable()
export class DbService<T = any> {
 private version = 1;
 private db$: Observable<IDBDatabase> = this.createDb(this.config.name, the this.version);

constructor(
 @Inject(DB_CONFIG) private config: DbConfig,
 ) { }

 private createDb(name: string, version?: number): Observable<IDBDatabase> {
 const openRequest: IDBOpenDBRequest = indexedDB.open(name, version);

 openRequest.onupgradeneeded = (evt: IDBVersionChangeEvent) => this.onUpgradeNeeded(openRequest);

 return this.fromIDBRequest(openRequest).pipe(
shareReplay(1),
);
}

 private onUpgradeNeeded(openRequest: IDBOpenDBRequest): void {
 const db = openRequest.result;
 if (db.objectStoreNames.contains(this.config.objectName)) {
return;
}
 db.createObjectStore(this.config.objectName, { keyPath: this.config.keyPath });
}

 public save(value: T, key?: IDBValidKey): Observable<IDBValidKey> {
 return this.db$.pipe(
 mergeMap((db: IDBDatabase) => this.fromIDBRequest(
 this.createIDBObjectStore(db, 'readwrite').put(value, key)
)),
);
}

 public saveAll(values: T[]): Observable<IDBValidKey[]> {
 return from(values).pipe(
 mergeMap((value: T, index: number) => this.save(value, index)),
toArray(),
);
}

 public delete(key: string): Observable<undefined> {
 return this.db$.pipe(
 mergeMap(db => this.fromIDBRequest(
 this.createIDBObjectStore(db, 'readwrite').delete(key)
))
);
}

 public clear() {
 return this.db$.pipe(
 mergeMap(db => this.fromIDBRequest(
 this.createIDBObjectStore(db, 'readwrite').clear ()
))
);
}

 public retreive(key: string): Observable<T> {
 return this.db$.pipe(
 mergeMap(db => this.fromIDBRequest(
 this.createIDBObjectStore(db, 'readonly').get(key)
)),
);
}

 public retreiveAll(): Observable<T[]> {
 return this.db$.pipe(
 mergeMap(db => this.fromIDBRequest(
 this.createIDBObjectStore(db, 'readonly').getAll()
)),
);
}

 private createIDBObjectStore(db: IDBDatabase, mode: IDBTransactionMode): IDBObjectStore {
 const transaction: IDBTransaction = db.transaction(this.config.objectName, mode);
 return transaction.objectStore(this.config.objectName);
}

 private fromIDBRequest<R>(idbRequest: IDBRequest<R>): Observable<R> {
 return new Observable<R>(observer => {
 idbRequest.onsuccess = (evt: Event) => {
observer.next(idbRequest.result);
observer.complete();
evt.the stoppropagation();
};
 idbRequest.onerror = (evt: Event) => {
observer.error(idbRequest.error);
evt.the stoppropagation();
};
});
}

 public selectDb() {
 return this.db$;
}
}

In principle, this is a sandbox. Thank you. - Dashawn_Spinka commented on April 4th 20 at 13:23

Find more questions by tags AngularTypeScript