Monacaデバッガー用localStorageマネージャーの作成
こんにちは、サンプルアプリ開発者の山田健一です。
localStorage をアプリ中で使用する場合、localStorage は作成したアプリ専用となります。
たとえばアプリAで key：key1、value：value1 というデータを作成し、アプリBでkey：key1、value：no-valueというデータを作成しても、アプリAから読む key1 の value は value1 です。
ただし、Monacaデバッガーを使用してデバッグするときは、条件が変わってきます。
スマホ側から見ると、Monacaデバッガーというアプリが稼働しているため、Monacaデバッガーの中でアプリAがkey：key1、value：value1 というデータを作成し、アプリBでkey：key1、value：no-valueというデータを作成した場合、次にMonacaデバッガーの中でアプリAが key1 のデータを読むと no-value になっています。
ですから、MonacaでlocalStorage を使用するアプリを作成する場合、keyの設計には注意を払う必要があります。
また、localStorage は他のアプリから参照できないという特性のため、デバッグ中に苦労する場面があります。
たとえば、保存するオブジェクトの構造を変更したとき、古いデータを読もうとすると例外が発生したりする可能性があります。
このとき、他のアプリからデータを削除したりすることはできません。
ただし、Monacaデバッガーの中でアプリの動作確認を行っている場合、Monacaデバッガーの中からキー削除アプリを起動すれば、問題のキーは削除することができます。
このMonaca デバッガーと localStorage の特性を利用して、Monaca デバッガー用 localStorage マネージャーを作成することにします。
作成の目的は2つです。
- Monaca デバッガーの中で他のアプリの作成した localStorage の内容を確認する
- 不具合があるときは、そのデータを削除する
仕様は次のようにします。
- アプリ起動時に、localStorage に蓄えられたすべての key を一覧する
- key をタップしたら item の内容を表示する
localStorage にはテキストしか保管できませんので、通常、JSON 化を行い、保存します。そのため、パース＆整形をしてデータを表示するようにします。JSON形式でないデータの場合は、そのまま表示するようにします。また、itemが配列になっている場合などは、うまく表現できませんので、データをそのまま表示するテキストエリアも用意します。
※JSONについては次のサイトに詳しく解説されていますので参照してください。
http://www.json.org/json-ja.html
index.html
index.htmlの内容は次のようになります。
http://docs.monaca.mobi/sampleapp/003todo/todo/で紹介しているTODOアプリの一覧部分とTODO変更の部分を流用して作成しました。
似たようなレイアウトがある場合、積極的に流用して工数を削減しましょう。
main.js
main.jsもTODOアプリから流用します。
大きく異なるのは次の部分です。
TODOアプリのときはitemのデータ構造が固定でしたが、localStorageマネージャーではデータ構造が不明です。
そのため、汎用的な出力になります。
詳しい内容はソースをダウンロードしてください。
このlocalStorageマネージャーはMonacaデバッガー専用です。このようなツールが作成／使用できるのもMonacaの魅力です。
デバッグしたいアプリのitem構造に合わせてソースを書き換えるのも有用だと思います。
