Cloud SQLとWeb Storageを使用した仕訳データ登録サンプル
ここから第2回のサンプルに入っていきますが、サンプルは2つの処理プログラムから構成されます。
1つはクラウドデータベース（MySQL）にある勘定データをWebクライアントのlocalStorageに書き込む処理で、もう一つは書き込まれたローカルの勘定データを使用して仕訳データを登録する処理です。
1 アカウントデータのlocalStorage書き込み
1.1 localStorageアカウント管理画面
図2はlocalStorageアカウント管理の初期表示画面です。この画面では画面上部の4つのボタンが主に使用されます。
図3は右上の「アカウント全件ローカル登録」ボタンをクリックした時の画面表示です。このボタンクリックでクラウド上にあるMySQLからアカウントデータ（勘定コードと勘定科目名のセット）を全件ダウンロードし、ローカルPCにキー・バリュー型データとして書き込みます（Web Storage）。
他に「クラウドアカウント全件参照」ではクラウドMySQLに書き込まれているアカウントデータを全件表示し、「ローカルアカウント全件参照」ではローカルのWeb Storageに書き込まれているアカウントデータの全件表示を行います。また、「ローカルアカウント表示クリア」では画面表示のアカウントデータをクリアします。
1.2 クライアントコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>localStorage</title>
<script type="text/javascript" src="../jslib/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
//（1）このブラウザでWeb Storageが使用可能か確認
if (localStorage){
$("#stat").text("このブラウザはlocalStorage使用可能です。");
}else{
$("#stat").text("このブラウザはlocalStorage使用できません。");
}
//（2）以下画面上部のボタンクリックに対応した処理関数呼び出し。
$("#revallcloud").click(revallcloud);
$("#addalllocal").click(addalllocal);
$("#revalllocal").click(revalllocal);
$("#clralllocal").click(clralllocal);
});
function revallcloud(){ //（3）クラウドMySQL登録の勘定データ表示
var query = {};
query["mode"] = "getAllAcct";
$.get("/acctsvlt", query, function(json){ //（4）
var dat = $.parseJSON(json); //受信データ（勘定データ）をJSオブジェクトに変換
for(var i = 0; i < dat.acct.length; i++){ //ループ処理で受信勘定データを全件表示
var acct_code = dat.acct[i].acct_code;
var acct_name = dat.acct[i].acct_name;
items.options[items.options.length] = new Option(acct_code+" : "+acct_name, acct_code);
//（5）勘定データの全件表示（selectメニューフィールド）
}
$("#stat").text("クラウド登録 アカウント 参照完了");
});
}
function addalllocal(){ //（6）Web Storageを使用して勘定データlocalStorage書き込み
var query = {};
query["mode"] = "getAllAcct";
$.get("/acctsvlt", query, function(json){ //クラウドサーバに勘定全件参照リクエスト送信
var dat = $.parseJSON(json);
for(var i = 0; i < dat.acct.length; i++){
var acct_code = dat.acct[i].acct_code;
var acct_name = dat.acct[i].acct_name;
localStorage.setItem(acct_code, acct_name);
//（7）勘定データをlocalStorage書込
var acct_name2 = localStorage.getItem(acct_code);
//（8）書き込んだローカルの勘定データ読み取り
items.options[items.options.length] = new Option(acct_code+" : "+acct_name2, acct_code);
//（9）読み取った勘定データの表示
}
$("#stat").text("クラウド アカウント ローカル登録完了");
});
}
function revalllocal(){ //（10）localStorageの勘定データ全件表示
$("#items").html(""); //（11）画面クリア
for (var i = 0; i < localStorage.length; i++) {
var acct_code = localStorage.key(i); //（12）
var acct_name = localStorage.getItem(acct_code); //（13）
items.options[items.options.length] = new Option(acct_code + ":" + acct_name, acct_code);
}
$("#stat").text("ローカル登録 アカウント 参照完了");
}
function delalllocal(){ //（14）表示勘定データの全件クリア
for (var i = 0; i < localStorage.length; i++) {
var acct_code = localStorage.key(i);
localStorage.removeItem(acct_code); //（15）
}
$("#stat").text("ローカル登録 アカウント 削除完了");
}
function clralllocal(){
$("#items").html(""); //selectメニューのオプションフィールドを全件クリア
$("#stat").text("表示クリア完了");
}
function add() {
localStorage.setItem($("#key").val(), $("#val").val());
rev();
}
function rev() {
$("#items").html("");
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var val = localStorage.getItem(key);
items.options[items.options.length] = new Option(key+":"+val, key);
}
}
function del() {
var items = $("#items")[0];
if (items.selectedIndex < 0){ return; }
var selected = items.options[items.selectedIndex].value;
localStorage.removeItem(selected); //選択された項目を削除
rev();
}
</script>
</head>
<body>
<h2 style="color:#aa0022">localStorageアカウント管理</h2>
<div>
<input type="button" id="revallcloud" value="クラウドアカウント全件参照 "/>
<input type="button" id="addalllocal" value="アカウント全件ローカル登録 "/>
</div>
<div>
<input type="button" id="revalllocal" value="ローカルアカウント全件参照"/>
<input type="button" id="clralllocal" value="ローカルアカウント表示クリア"/>
</div>
ステータス： <span id="stat"></span>
<hr/>
<select id="items" size="10" style="width: 250px"></select>
<hr/>
<input type="button" onclick="add()" value="アカウント登録 "/>
コード:<input type="text" size="6" id="key"/>
アカウント名:<input type="text" size="16" id="val"/>
<br/>
<input type="button" onclick="del()" value="アカウント削除"/><br/>
</body>
</html>
画面ロード完了時
リスト2で画面ロード完了後に実行される処理は2種類で、1つは（1）のif文以下で行われる、使用ブラウザのlocalStorage対応確認と、（2）以下での画面上部4種類のボタンクリック時の関数呼び出し定義です。
revallcloud関数
この関数では、（4）の$.getメソッドでクラウドサーバに勘定全件参照リクエストを送信し、レスポンス受信したJSONフォーマットデータをfor文の繰り返し処理で全件表示しています。Cloud SQLを使用する場合も一般的なサーブレットアクセスと変わるところはありません。
複数レコードの参照表示などでは、テーブル構成で表示する場合も多いですが、ここでは（5）でselectメニューへのオプション項目追加形式で表示しており、この方法では各項目の表示処理を1行コードで済ませることができます。
addalllocal関数
この関数での処理内容はrevallcloudとほとんど同じですが（7）と（8）の2行が追加されています。クラウドサーバから受信した勘定コード（acct_code）と勘定名（acct_name）を（7）でlocalStorageに書き込み、（8）で確認のため、書き込まれた勘定名をlocalStorageで読み込んでいる部分だけが追加されています。なお、（9）ではlocalStorageを参照した勘定名を表示するようにしています。
この関数での処理は、クラウド上のデータベースとローカルのWeb Storageの連携準備ということになりますが、このように簡単に行うことができます。
revalllocal関数
（10）のrevalllocal関数では、localStorageに書き込まれた勘定データを全件表示しています。
for文内、（12）のlocalStorage.key(i) でi番目の書込項目キーを取得し、（13）では取得したキーを使用して勘定科目名を取得しています。
delalllocal関数
delalllocal関数の処理手順は、revalllocalと同じですが（15）のremoveItemメソッドで削除しています。
1.3 サーバ側コード
サーバ側コードは、次の仕訳データ登録と同じサーブレットとビーンズが使用されていますので、仕訳データ登録処理手順の後にまとめて紹介します。
