Dexieで動的にindexedDBを使用

・モジュール(jsファイル)

export class Test_DB extends Dexie {
    constructor() {
        super('TEST_DB');
        this.version(1).stores({
            tbl_A: "no,no,name,age",
            tbl_B: "[no+sub_no],[no+sub_no],no,name"
        });
    }
}
export const Dexie_db = new Test_DB();

DB名、ストア名、キー、インデックスを定義する。
インデックスが不足していると、コンソールでお知らせしてくれる。
複合キーは[]を使用。
更新毎にバージョンを上げていく。

・dexie.js 読込部分

<script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>

latestを指定すると、常に最新のjsが読み込まれる。

・モジュール 呼出部分

import("./[①のjsファイル名].js?ver=1").then((module) => {

    //データ追加
    module.Dexie_db.tbl_A
        .add({
            no: 1
           ,name: '太郎'
           ,age: 13
        });

    //データ削除
    module.Dexie_db.tbl_A
        .where('age').belowOrEqual(10).delete();

});

「no：1、name：太郎、age：13」のレコードが追加されて、
「age<=10」のレコードが削除される。
モジュール呼出時に「?ver=1」などでキャッシュクリアした方が良いです。
(ストア更新毎にキャッシュクリアをお願いすることになる…)

Edgeのデベロッパーツールだと、「アプリケーション」からindexedDBの中身を確認可能。
実装時はストア定義を頻繁に変更するので、都度「データベースを削除」すると楽です。

セッション切れの後も入力内容を保持したい…
という要望があり実装(=ﾟωﾟ)ﾉ