Dexie.jsを利用してIndexedDBを取り扱う方法

IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexedDBが何なのか知らなかった。調べたところだいぶ前に書いたようなWebブラウザ側のデータベース技術っぽい。IndexedDBをそのまま書こうとすると結構面倒臭そうだったのでIndexedDBのライブラリであるDexie.jsを利用してIndexedDBを取り扱う方法のメモ。

IndexedDBについて

リファレンス

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

CookieやLocalStorageとの違い

ざっくりとした違いはデータ保存容量がCookieやLocalStorageより多く、トランザクションに対応していたり複雑なデータ型を取り扱るとのこと。こちらのページが分かりやすかった。

Dexie.jsについて

公式サイト

https://dexie.org/

CDN

以下で利用可能。JSライブラリのためjQueryは必須では無い。

<script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.2.4/dexie.min.js"></script>

異なるバージョンを使いたい場合は以下から探す。

https://cdnjs.com/libraries/dexie

ソースコード

<script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.2.4/dexie.min.js"></script>
<script>
const db = new Dexie('test_user_db');

//userテーブルの作成(idがオートインクリメントかつキーになる)
db.version(1).stores({
    users: `++id, name`,
});

//データを一件追加
db.users.put({
    name: '鈴木', age: 20, 
}).catch((error)=>{
    console.error(error);
});

//データをまとめて追加
db.users.bulkPut([
    {name: '川島', age: 30}, 
    {name: '山田', age: 40}, 
    {name: '佐々木', age: 50}, 
]).catch((error)=>{
    console.error(error);
});

//データを更新(id:2を更新)
db.users.update(2, {
    age: 33,
});

//データを一件削除(id:3を削除)
db.users.delete(3);

//データを全件削除
db.users.clear();

//データを一件取得(id指定)
db.users.get(2).then((users)=>{
    console.log(users);
}).catch((error)=>{
    console.error(error);
});

//データを全件取得
db.users.toArray().then(function (users) {
    console.log(users);
});
</script>

参考サイト

https://blog.katsubemakito.net/html5/indexeddb1

https://qiita.com/_linkin/items/8d68c8bd3cec33708e7a

https://monaledge.com/article/442