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

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

• GitHub - localForage/localForage: 💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.

目次

• LocalForage をインストールする
• コールバック形式と Promise 形式
• LocalForage インスタンスを生成する
• データを保存する
• データを取得する

LocalForage をインストールする

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

$ npm install localforage --save

TypeScript ではこんな感じで import すれば OK。

import * as localforage from 'localforage';

コールバック形式と Promise 形式

LocalForage はコールバック関数で書く方法と、Promise スタイルの2つの書き方に対応している。

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

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

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

LocalForage インスタンスを生成する

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

const myLF = localforage.createInstance({
  driver   : localforage.LOCALSTORAGE  // LocalStorage を使用する
  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 は公式を参照のこと。サンプルコード付きなので分かりやすい。

• 参考 : localForage