2013年2月25日月曜日

PhoneGapのStorage APIを利用してアプリの起動回数をカウントする

このエントリーをはてなブックマークに追加
PhoneGapのStorage APIを利用するとアプリのローカルストレージに簡単な情報を書き込んだり読み込んだりできます。Objective-CでのNSUserDefaults、Androidでのプリファレンスみたいな機能です。このStorage APIを利用してアプリの起動回数をカウントするサンプルを書きました。


関連:
NSUserDefaultsを利用してアプリの起動回数をカウントする
SharedPreferencesを利用してアプリの起動回数をカウントする


Storage API

情報はキーとアイテムのセットで保存します。
window.localStorage.setItem("key", "value");


キーを指定してアイテムを読み込みます。
var value = window.localStorage.getItem("key");


キーで指定されたアイテムを削除します。
window.localStorage.removeItem("key");


clearを呼び出すと、全ての情報が削除されます。
window.localStorage.clear();


ソースコード
getItemでcountの情報を取得し、その情報を表示した後、countをインクリメントしてsetItemで保存します。getItemで取得されるアイテムがない場合はnullが返るため、その場合は初回起動とみなします。

<html>
    <head>
        <meta name="viewport" content="width=default-width; user-scalable=no"/>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
        <script type="text/javascript" charset="utf-8">
              
                // イベントリスナの登録。デバイスの準備完了まで待つ。
                document.addEventListener("deviceready", onDeviceReady, false);
              
                // デバイス準備完了時にコールバック。
                function onDeviceReady() {
                    // キーで指定されたアイテムの取得
                    var count = window.localStorage.getItem("count");
                  
                    // 初回起動
                    if (count == null) {
                        count = 1;
                    }
                  
                    // ローカルストレージ初期化
                    document.getElementById("launced-count").innerHTML = count;
                  
                    // キーで指定してアイテムを保存
                    window.localStorage.setItem("count", ++count);
                }
          
        </script>
        <title>Count Up Test</title>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="content">
                <h1 id='launced-count'></h1>
            </div>
        </div>
    </body>
</html>


実行するとちゃんとカウントアップされました。

0 件のコメント:

コメントを投稿