2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

IndexedDBをKey Value Storeとして扱う

Posted at

はじめに

自分で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()にてオブジェクトを生成します。
この際にパラメータとして、dbNametableNameが与えられるため、必要であれば与えてください。

その後、keyとvalueの組み合わせでset()を呼ぶとデータが登録されます。
また、登録したものを取り出す際にはget()を呼ぶとデータを取得できます。

型定義上、WebStorageと同じようにvaluestringで定義しています。

あとは使いやすいように使ってみてください。

browserのsample

以下にブラウザで試せるsampleがあるので、試してください。

Indexed KV sample

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?