Cloud SQLとHTML5のWeb Storageで高速仕訳入力

Cloud SQLで学ぶ業務・基幹系アプリ再入門（2）

Web Storageプログラミングの基本

1. 対応ブラウザ

　Web Storageは、IE 8、Safari 4、Firefox 3.5、Chrome 3、Opera 10.5 およびそれ以降のバージョンで使用できます。実際に使用中のブラウザで動作可能かは次のスクリプトで簡単に確認することができ、今回のサンプルにも組み込んであります。

リスト1　ブラウザのWeb Storage使用可能確認

if(localStorage){
    $("#stat").text("このブラウザはlocalStorageを使用できます。");
}else{
    $("#stat").text("このブラウザはlocalStorageを使用できません。");    
}     

2. 基本プログラミング

　Web StorageのプログラミングはJavaScriptで行いますが、次のような簡単なコード記述でlocalStorageの操作が可能です。

2.1　localStorageのメソッド・プロパティ

　localStorageには次のようなメソッド・プロパティがありストレージ操作に使用されます。またこのメソッドはセッションストレージ（sessionStorage）でも同様の書式（localStorageをsessionStorageに置き換え）で使用することができます。

• setItem(key, data) ―― キーと値を指定して永続化する。キーと値はどちらも文字列に限られる
• getItem(key) ―― キーを指定して値を取得する
• removeItem(key) ―― キーを指定して値を削除する
• clear() ―― ストレージをクリアする
• length ―― ストレージに格納されている項目の数を返す
• key(index) ―― 項目のインデックスを指定し、キーを取得する

2.2　メソッド／プロパティの使用例

（1）localStorageにデータを書き込む

localStorage.setItem("111101",  "現金");

//この後同じキー値で再書き込みすれば上書きされる
localStorage.setItem("111101",  "小口現金");

//複数のバリュー値をJSONフォーマットで書き込む
localStorage.setItem("111102", { acct_name:  "現金 ", remark: "現金勘定" });

（2）localStorageからデータを取得する

var account = localStorage.getItem("111101");

　また、通常のJavaScriptオブジェクトからのプロパティ読出しと同様のコード書式も使用できます。

var account = localStorage["111101"];

（3）localStorageのデータを削除する

localStorage.removeItem("1111101");

　削除の場合もJavaScriptオブジェクトからのプロパティ削除と同様のコード書式が使用できます。

delete localStorage["111101"];

　localStorageに格納されたすべてのデータを削除する場合は、clear()メソッドを使用します。

localStorage.clear();

（4）ストレージデータのループ処理

for(var i = 0; i < localStorage.length; i++){
  var key = localStorage.key(i);
  var value = localStorage[key];
  ...
  }