Indexed DBとは、クライアントサイド（ブラウザ側）に構築されているデータストアで、キーで紐づけられたデータを扱うことができます。
Local Storageに比べて、大容量のデータを扱うことができます。
この記事では、Indexed DBを簡単に実装できるDexie.js の使い方について紹介します。
1. Dexie.js とは
Dexie.js - Minimalistic IndexedDB Wrapper
The easiest way to use IndexedDB. A lightweight, minimalistic wrapper that provides a straightforward API for developers using IndexedDB.
dexie.org
Dexie.jsは Indexed DBの JavaScriptラッパーで、gzip圧縮で22KBという超軽量なライブラリです。
オープンソースであり、GitHubで公開されています。
GitHub - dexie/Dexie.js: A Minimalistic Wrapper for IndexedDB
A Minimalistic Wrapper for IndexedDB. Contribute to dexie/Dexie.js development by creating an account on GitHub.
github.com
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();
コメント