PhoneGapでLocalDatabaseを使ってみる

PhoneGapでLocalStorageを試してみる - おかひろの雑記ではlocalStorageを使って簡単なキャッシュのサンプルを作ってみましたが、
今回はこれをlocalDatabaseで実装してみようと思います。

JavaScript

var db;
	
$(function(){
	// データベースの初期化
	db = window.openDatabase('sample','1.0','Phonegap sample','200000');
	db.transaction(function(tx){
		tx.executeSql('create table if not exists sampledb(id unique,name)');
	},errorCB);
});

// エラーコールバック関数
function errorCB(error)
{
	alert('Error');
}

// データを追加する
function insertData(id,name)
{
	db.transaction(function(tx){
		tx.executeSql('insert into sampledb values(?,?)',[id,name]);
	},errorCB);
}
// データの読み込みを行う。なければサーバーから検索
function loadData()
{
	$('#NoteDiv').html('');
	$('#ResultDiv').html('');
	
	db.transaction(function(tx){
		// localdbからデータを検索
		tx.executeSql('select * from sampledb',[],function(tx,results){
			var count = results.rows.length;
			if(count == 0)
			{
				// localdbのデータがなければ、サーバーから検索
				$.ajax({
					url : 'http://localhost:8080/torikumisample/ajaxXD/acaoAjax',
					success : function(data)
					{
						$('#NoteDiv').html('Load data from server.');
						
						var jsonData = $.parseJSON(data);
						// 取得したデータをlocaldbに保存
						insertData(jsonData.id,jsonData.name);
						
						$('#ResultDiv').html(jsonData.name);
					},
					error : function(data)
					{
						alert('Error!');
					}
				});
			}
			else
			{
				// localStorageにデータがあれば、そのデータを表示
				$('#NoteDiv').html('Load data from local database.');
				
				var data = results.rows.item(0);
				$('#ResultDiv').html(data.name);
			}
		});
	},errorCB);
}
// localdbデータ削除
function deleteData()
{
	$('#NoteDiv').html('');
	$('#ResultDiv').html('');
	// localdbからデータを削除
	db.transaction(function(tx){
		tx.executeSql('delete from sampledb');
	},errorCB);
}

HTML

<a href="javascript:loadData()">データを読み込み</a>
<p/>
<a href="javascript:deleteData()">データ消去</a>
<div id="ResultDiv">
</div>
<div id="NoteDiv">
</div>

サーバーからのJSONデータは同じように

{"id" : "001","name" : "山田太郎"}

データ読み込みをすると、最初の一回はAjaxでサーバーから取得してLocalDatabaseに保存、
２回目以降はLocalDatabaseから読み込みを行います。
LocalDatabaseのデータを消去すると、また１回目はサーバーに通信します。

今回もPCのSafariで動作確認しながら作成し、出来上がった後にPhoneGapに移行して動作確認しました。

localStorageと比べると少しややこしいですが、SQLが使えるのは便利です。