はじめに
自分でPWAのアプリケーションを作成した際、データの保存のためIndexedDBを使いました。
ただ機能的にはLocalStorageで十分だったため、Key Value Storeのように簡単に扱えるようなライブラリを作成しました。
本記事はIndexedDBとは何かと、どのようにKey Value Storeのように使うかを説明します。
IndexedDBとは
IndexedDB APIによると、
IndexedDB は、ファイルや blob を含む構造化された多くのデータを保存する、クライアントサイドのローレベル API です。
とのことです。
クライアントサイドでデータを保存する仕組みで、以下の特徴があります。
- オブジェクト指向データベース
- データのやり取りが非同期
- ブラウザでもPWAでも使える
特に「ブラウザでもPWAでも使える」のが重要で、WebStorageはPWAにて使えないようになっています。
そのため、IndexedDBでKey Value Storeを構成しようと思いました。
indexed-kv
今回作ったライブラリのindexed-kvですが、sampleは以下のようになっています。
import { IndexedKv } from "indexed-kv";
const inputKey = "test";
const inputValue = "testValue";
const indexedKV = new IndexedKv(); // オブジェクトの作成
indexedKV
.set(inputKey, inputValue) // keyとvalueのセットを登録
.then(() =>
indexedKV.get(inputValue).then(
value => console.log(value) // "testValue"
)
);
まず、new IndexedKv()
にてオブジェクトを生成します。
この際にパラメータとして、dbName
とtableName
が与えられるため、必要であれば与えてください。
その後、keyとvalueの組み合わせでset()
を呼ぶとデータが登録されます。
また、登録したものを取り出す際にはget()
を呼ぶとデータを取得できます。
型定義上、WebStorageと同じようにvalue
はstring
で定義しています。
あとは使いやすいように使ってみてください。
browserのsample
以下にブラウザで試せるsampleがあるので、試してください。