最近、ちょっとした思いつきで時計アプリを作りました。
せっかくなので「なるべく高機能な時計を目指す」という、謎なコンセプトです。

その中で、ユーザーごとに設定を保存する場面があり、そこで便利だったのが localforage というライブラリです。今回はその活用例について紹介します。

localforageとは？

公式サイトはこちらです：
https://localforage.github.io/localForage/

localforageは、非同期で動作するブラウザ向けのストレージライブラリです。
裏側では IndexedDB や WebSQL、localStorage など、複数のブラウザストレージ技術を自動的に選択して使ってくれます。

つまり、サーバーと通信せずにデータを保存・取得できる仕組みで、ブラウザに状態を保たせたい時にとても便利です。

何に使ったのか

今回は、この時計アプリの「モード切り替え」の記憶に利用しました。

実際のアプリはこちらから確認できます：
https://arc.uiro.dev/0503/app/clock

赤線部分のように、表示モードを変更できるようにしていますが、ページを再読み込みしても、最後に使っていたモードに自動で戻るようになっています。そのためには、ユーザーが最後に選んだモードをローカルに保存する必要がありました。

下記がアプリ全体の構成図です：

今回はやや大げさな構成にしてしまいましたが、もっとシンプルに作れた気がします。

localforageの優れている点

localforageの特長は以下の通りです：

• 使用可能なストレージ方式を自動で選択してくれるため、ブラウザごとの違いを意識しなくて済む
• localStorage と違い、文字列以外にも JSON オブジェクトや変数など、さまざまな形式のデータを直接保存・取得できる

こうした利便性から、Webアプリにおいて「ちょっとした保存機能が欲しい」という場合に良いと思います。

おわりに

今回はlocalforageを活用して、時計アプリのモード記憶機能を実装してみた例を紹介しました。
ややマニアックな用途ではありましたが、実際に使ってみると、かなり便利に使えました。

使い方を理解するまではやや取っつきにくいかもしれませんが、覚えておくと多くの場面で活用できる便利なライブラリです。興味のある方は、ぜひ一度試してみてください。