React プロジェクトに IndexedDB を組み込んだのですが、その際の手順を備忘録としてまとめ。
下記サイトを参考にして実装してももちろんOKですが、素の IndexedDB API はちょっと面倒だったので、ライブラリを使うことにしました。
IndexedDB API – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API
タイトルにもある通り、Dexie.js ライブラリです。
Dexie.js – Minimalistic IndexedDB Wrapper
https://dexie.org/
今回は、React で書きましたが、Get Started のページを見ると、Vue や、Angular でも使えるとのことです。
実装方法ですが、まず下記ライブラリをコマンドを使ってインストールします。
npm install --save dexie dexie-react-hooks
インストールが終わったら早速実装していきます。
サンプルコードは下記のとおりです。
import Dexie from 'dexie';
// IndexedDB の初期化
const db = new Dexie('[データベース名]');
db.version(1).stores({
files: 'name',
});
// データを保存する
db.files.put({ name: [データ名], data: [保存したいデータ] });
// データを取得する
const data = await db.files.get([取得したいデータ名]);
なお、6行目位の file はテーブル名なので、files 以外の任意の名前にしてももちろんOKです。
また、最終行で取得したデータは今回は { name: [データ名], data: [保存したいデータ] } という形式で取得できます。
実際に使用する際は data.name や data.data とすれば値を取得できます。
サンプルは以上です。
実際に Dexie.js ライブラリを使ってみて分かりましたが、確かに素のままの IndexedDB API で実装するより楽だし分かりやすかったです…！
特に大きな理由がなければ、IndexedDB を実装する際は、Dexie.js ではなくとも、ライブラリを使うことをおすすめします。
以上、React プロジェクトで Dexie.js ライブラリを使って IndexedDB にデータを保存する方法についてでした。
ご参考になれば幸いです。
