【Angular】IndexedDBを使う

前提

• AngularでIndexedDBにアクセス

• ライブラリに Dexie.jsを使う

  • バージョンは3.0.2

  • ライブラリの詳細は以下参考

  • https://dexie.org/

IndexedDB？

• ブラウザー内にデータを永続的に保存する手段

• Key-Value形式で保存

• 詳細は以下参照

  • https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB

実装

ライブラリのインストール

npm install --save dexie

DB定義の作成

import Dexie from 'dexie';
​
export class RamenDB extends Dexie {
    
  // ストア定義
  menu: Dexie.Table<IMenu, string>;
  recipi: Dexie.Table<IRecipi, string>;
​
  /** DBバージョン */
  dbversion: number = 1;
​
  constructor() {
    // DB名
    super('RamenDB');
​
    // ストア定義
    this.version(this.dbversion).stores({
      menu: '++menuId, name, price',
      recipi: 'menuId, men, soup, ingredients',
    });
​
    // ストア名
    this.menu = this.table('menu');
    this.recipi = this.table('recipi');
  }
}
​
export interface IMenu {
  name: string;
  price: number;
}
​
export interface IRecipi {
  menuId: number;
  men: string;
  soup: string;
  ingredients: Array<string>;
}
​

データアクセス用のサービスクラスを作成

import { Injectable } from '@angular/core';
import { from, Observable } from 'rxjs';
​
import { IMenu, RamenDB } from '../table/ramen-table';
​
@Injectable({
  providedIn: 'root',
})
export class RamenDBService {
  ramenTable = new RamenDB();
​
  constructor() {}
​
  // メニューテーブル
​
  /**
   * メニューを取得
   * @param menuId
   */
  public getMenu(menuId: number): Observable<IMenu> {
    return from(this.ramenTable.menu.get(menuId));
  }
​
  /**
   * メニューを全件取得
   */
  public getAllMenu(): Observable<IMenu[]> {
    return from(this.ramenTable.menu.toArray());
  }
​
  /**
   * メニューの追加
   * @param menu
   */
  public addMenu(menu: IMenu): Observable<number> {
    return from(this.ramenTable.menu.add(menu));
  }
​
  /**
   * メニューの更新
   * @param menuId
   * @param menu
   */
  public updateMenu(menuId: number, menu: IMenu) {
    return from(this.ramenTable.menu.update(menuId, menu));
  }
​
  /**
   * メニューの削除
   * @param menuId
   */
  public deleteMenu(menuId: number) {
    return from(this.ramenTable.menu.delete(menuId));
  }
}
​

DBの内容を確認

• DBの内容はデバッグツールの「Application」タブから確認できる