IndexedDBをKey Value Storeとして扱う

はじめに

自分でPWAのアプリケーションを作成した際、データの保存のためIndexedDBを使いました。
ただ機能的にはLocalStorageで十分だったため、Key Value Storeのように簡単に扱えるようなライブラリを作成しました。

npm
github

本記事は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があるので、試してください。

Indexed KV sample