LocalForage を使ってアプリ内 DB を簡単構築

Mozilla 財団がリリースしている LocalForage というライブラリがある。IndexedDB、WebSQL、LocalStorage の操作をラップし、いずれの技術の場合でも同じ API でデータの保存や取り出しが行えるようになっている。

LocalForage のインストール

LocalForage は npm でインストールするのが一番使いやすいであろう。

$ npm install localforage --save

こんな感じで import したら OK。

import * as localforage from 'localforage';

コールバックと Promise

LocalForage は引数にコールバック関数を渡す方法と、Promise スタイルで書ける2つの使い方に対応している。

// コールバック関数を渡す方法
localforage.setItem('key', 'value', function(setError) {
  // setError が null なら成功
  localforage.getItem('key', function(getError, value) {
    // getError が null なら成功・value に取得した値が入っている
  });
});

// Promise スタイルで書く方法
localforage.setItem('key', 'value')
  .then(() => {
    localforage.getItem('key');
  })
  .then((value) => {
    // 値を取得
  })
  .catch((error) => {
    // エラー時
  });

今回はいずれも Promise スタイルで記載するサンプルを紹介する。

LocalForage インスタンスの生成

まずは LocalForage インスタンスを作る。インスタンスが複数要らない場合は config() メソッドを使ってグローバル変数である localforage に処理を持たせるが、大抵は複数の DB を持ったりしたいと思うので、createInstance() を使って LocalForage インスタンスを取得しようと思う。

const myLF = localforage.createInstance({
  driver   : localforage.LOCALSTORAGE  // LocalForage を使用する
  name     : 'MyLocal',                // 名前空間
  storeName: 'example',                // 名前空間内のインスタンスの識別名
  version  : 1                         // バージョン
});

今回は LocalStorage を使うことにした。WebSQL を使用している場合は size オプションも指定できる。

以降のサンプルではココで生成した myLF を使っていく。

データの保存

データの保存には setItem() を使う。

myLF.setItem('キー', ['保存したい値', '文字列や数値だけでなく', '配列やオブジェクトも渡せる'])
  .then(() => {
    // 保存成功
  })
  .catch((error) => {
    // 保存失敗
  });

LocalStorage の場合は JSON.stringify() が必要になったりするが、LocalForage の場合はそのあたりをよしなにやってくれるので、配列やオブジェクトをそのまま渡せる。

データの取得

setItem() で保存したデータを取得するには getItem() を使う。

myLF.getItem('キー')
  .then((value) => {
    // キーに紐付く値がない場合、value は null になる
    // setItem() で値に undefined を保存した場合も null が返却される
    if(!value) {
      // 値なし
    }
    
    // value を呼び出し元に渡したり…
  })
  .catch((error) => {
    // 取得失敗
  });

こんな感じ。こちらも JSON.parse() したりしなくて良いので楽ちん。

基本はこのぐらいで済むかしら。

その他の API は公式を参照のこと。サンプルコード付きなので分かりやすい。