CordovaでHTML5ハイブリッドアプリ開発 - Android編

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" の値を削除
   }