Monacaを利用したアプリ開発においてデータの保存方法と確認方法

Local Storage

Webサービスの開発の際、ローカル環境にデータを保存したい場合、HTML5で追加されたLocal Storageを利用することが一般的かと思います。では、Monaca (Cordova)でスマホアプリを作成している場合は、どのようにしてローカル環境にデータを残すのでしょうか?実はWebサービスと同じくLocal Storageを利用することができます。

Local Storageの利用

Local Storageは、キー(key)と値(value)の組み合わせで保存します。基本的には2つのメソッドだけ覚えていれば大丈夫でしょう。それはLocal Storageへの書き込みと読み込みです。 Local Storageへの書き込み Local Storageへの読み込み では実際にMonacaのプロジェクトで試してみましょう。Local Storageを利用する際、デバッグはMonaca Localkitで行うことをオススメします。MonacaクラウドIDEでも開発は進めることができますが、デバッガーが反応しないことがあります。 それではプロジェクトの「index.html」を次のようにしました。 Local Storageは次の行に見られます。
  • 12行目 … Local Storageへの保存
  • 13行目 … Local Storageへの読み込み

Local Storageの確認方法

ではこれを確認するにはどうすればいいのでしょうか。それはDeveloper Toolsより確認することができます。「Application」タブの「Storage – Local Storage – file://」をクリックします。すると保存されている値をリアルタイムで見ることができます。またLocal Storageの読み込み結果はコンソールに表示するようにしたので、「Console」タブより値を見ることができました。 実はこのMonaca LocalkitはChromeベースですので、Chromeにおける確認方法と同じですね。

まとめ

Monaca (Cordova) を利用したアプリ開発においても、Webサービスと同様にデータの保存にLocal Storageを利用することができます。またその確認方法もChromeで確認するときと同じ手順です。
» お仕事のご依頼はこちら