dexie.js で簡単に Indexed DBを実装する方法
Indexed DBとは、クライアントサイド(ブラウザ側)に構築されているデータストアで、キーで紐づけられたデータを扱うことができます。
Local Storageに比べて、大容量のデータを扱うことができます。
この記事では、Indexed DBを簡単に実装できるDexie.js の使い方について紹介します。
目次
1. Dexie.js とは
Dexie.jsは Indexed DBの JavaScriptラッパーで、gzip圧縮で22KBという超軽量なライブラリです。
オープンソースであり、GitHubで公開されています。
https://github.com/dfahlander/Dexie.js
2. Dexie.js のインクルード方法
インクルード方法はとっても簡単です。
headタグの中に以下を追加するだけでOKです🙆♀️🙆♂️
<script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
3. データベースとストアの作成
データベースを作成するには、以下のように記述します。
var db = new Dexie("NoteDataBase");
データストアを作成するには、以下のように記述します。
db.version(1).stores({
Note: '++id, NoteID, SavedDateTime, Title, Contents'
});
このデータストアの定義は以下になります。
- バージョン番号:1
- データストア名:Note
- キー:id (オートインクリメント)
- データ:NoteID, SavedDateTime, Title, Contents
クライアントサイドのバージョン番号が古い場合、自動的にデータストア定義が更新されます。
4. レコード作成・更新
レコードを作成・更新するには、以下のコードで実現できます。
await db.Note.put({
NoteID: 1,
SavedDateTime: Date.now(),
Title: "はじめてのノート",
Contents: "はじめてのノートです。サクサク快適にメモできます。"
})
Note
というデータストアに対してレコードを更新しています。
キーにしていた「id」はここでは指定していません。オートインクリメントですので、自動的に採番されます。
5. 全件取得
データストアのレコードを全件取得するには以下のようにコーディングします。
let allrec = await db.Note.toArray();
6. レコード検索
whereメソッドを使用して検索することも可能です。
let NoteRecord = await db.Note
.where({
NoteID : parseInt(_NoteID),
SavedDateTime: parseInt(_SavedDateTime)
}).toArray();
7. ソート・並び替え
並び替えするには、sortByメソッドを使用します。
reverseメソッドと組み合わせると、降順ソートも可能です。
let NoteRecords = await db.Note.where('NoteID').equals(parseInt(_NoteID)).reverse().sortBy('SavedDateTime');
8. レコード削除
削除するには、deleteメソッドを使用します。
whereメソッドを使用してレコードを絞り込み、最後にdeleteメソッド呼び出してレコード削除します。
await db.Note
.where({
NoteID : parseInt(_NoteID),
SavedDateTime: parseInt(_SavedDateTime)
}).delete();