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 は公式を参照のこと。サンプルコード付きなので分かりやすい。
- 参考:localForage