【Cordova】JavaScriptのlocalStorageで保存した値が消える

村上 著者:村上

【Cordova】JavaScriptのlocalStorageで保存した値が消える

Corovaアプリを開発中、localStorage で保存した値が、消してもないのに消えるという現象に遭遇しました。
結論から言うとただのプログラムのミスだったのですが、調べているときに、localStorage の利用はあまり推奨されないという記事をいくつか見つけました。

一番詳しいと思った記事がこちら。
ローカルストレージに簡単な解決策はない | Mozilla Developer Street (modest)
https://dev.mozilla.jp/2012/03/there-is-no-simple-solution-for-local-storage/

いくつか抜粋すると、

  • ストレージの上限に達した事を知る上手い仕組みがない
  • localStorage はファイルの読み込み/書き込みが絡むため、システムによっては時間がかかることがある
  • 速く動いているように見せるため、ブラウザは最初のリクエスト時にデータをメモリ上にロードする。そのため多くのメモリを食ってしまう
  • localStorage は永続的なため、そのサイトやサービスをもう使わなくなっても、データがブラウザの立ち上げ時にロードされ続けてしまう

上記のようなデメリットが挙げられます。

また、私の体感ですが、書き込み・読み込みに若干のタイムラグが発生する場合があるように感じました。
そのため、データを保存直後に読み出すなどをした場合に、データが取得できないということもあり得るかもしれません。

 

特に重要なデータを保持しないのであれば、localStorage でも問題ないと思いますが、そうでない場合、プラグインの「cordova-plugin-nativestorage」の使用をおすすめします。
GitHub のページは下記から確認できます。

GitHub – TheCocoaProject/cordova-plugin-nativestorage: Cordova plugin: Native storage of variables in Android, iOS and Windows
https://github.com/TheCocoaProject/cordova-plugin-nativestorage

使い方は下記のとおりです。

// データの保存
NativeStorage.setItem([キー名], [値], [成功時の処理], [失敗時の処理]);
// データの取得
NativeStorage.getItem([キー名], [成功時の処理], [失敗時の処理]);
// 全データの取得
NativeStorage.keys([成功時の処理], [失敗時の処理]);
// データの削除
NativeStorage.remove([キー名], [成功時の処理], [失敗時の処理]);
// 全データの削除
NativeStorage.clear([成功時の処理], [失敗時の処理]);

ほとんど localStorage の使い方と同じなので、分かりやすいかと思います。
また、localStorage と違って、成功/失敗時の処理を追加できるため、確実にデータが保存できたかどうかが確認できるのは良いですね。
仕様に合うのであれば、localStorage よりもこちらの使用をおすすめします。

 

以上、Cordova アプリでの localStorage の使用の是非と、代替となるプラグイン「cordova-plugin-nativestorage」のご紹介でした。
是非ご活用ください。

  • この記事いいね! (0)

著者について

村上

村上 administrator