Andorid Studioを使ったAndoridアプリの作り方

4.実践(ソースコードの編集)

4.2 ローカルストレージを利用

ローカルストレージの記憶容量はiOSやAndroidでは5MBしかないのでフォームの内容やアプリの設定など保存するデータが限られているものに適しています。  ※ここではフォームの値を保存する方法を解説します。

  1. biorhythm\www の index.html(他にも設定するページがある場合は必要に応じて)を開き、Zepto.js 及びローカルストレージの設定をする javascriptファイルを(ここでは main.js(cordovaをインストールした時に自動で作成される index.js でも可))を読み込むコードを記述。
    ローカルストレージを利用
    <script src="js/zepto.js"></script>
    <script src="js/main.js"></script>
    
  2. ローカルストレージを設定するコードを記述。
    <input id="storage" type="text">
    <input type="button" value="ストレージにデータを保存" onClick="set()">
    <div id="result">
    </div>
    <input type="button" value="ストレージのデータを削除" onClick="cle()">
    <input type="button" value="ストレージの全てのデータを削除" onClick="allcle()">
                        
  3. biorhythm\www\js の main.js を開き、ローカルストレージの動作を記述。
    var data;
    $(function() { // ページ読み込み後実行
        data = window.localStorage.getItem("lsdata"); // localStorageからデータを取得して変数 data に格納
        $("#result").text(data); // 変数 data の値を id="result" に表示
        $("#storage").val(data); // 変数 data の値を id="strage" に表示(フォームにデータを残したい場合)
    });
    
    function set() { // "ストレージにデータを保存"ボタンクリックで実行
        data = $("#storage").val(); // id="strage" の値を変数 data に格納
        window.localStorage.setItem("lsdata", data); // localStorageにデータを保存
        $("#result").text(data); // 変数 data の値を id="result" に表示
    }
    
    function cle() { // "ストレージのデータを削除"ボタンクリックで実行
        window.localStorage.removeItem("lsdata"); // localStorageのデータを削除
        $("#result").text(""); // id="result" の値を削除 
        $("#storage").val(""); // id="storage" の値を削除
    }
    
    function allcle() { // "ストレージの全てのデータを削除"ボタンクリックで実行
        window.localStorage.clear(); // localStorageの全てのデータを削除
        $("#result").text(""); // id="result" の値を削除 
        $("#storage").val(""); // id="storage" の値を削除
    }