Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

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

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

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

browserのsample

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

Indexed KV sample

tkdalic
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away