libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

Indexed Database APIによるデータベース (5/7)

作成:2011-09-19 09:28
更新:2012-04-09 17:55

■データの検索

続いて、データの検索についてです。データの検索は、オブジェクトストアを取得した後、「get」というメソッドを使って行います。これは以下のようになっています。
変数 = db.transaction("mydata").
        objectStore( 名前 );
変数 = 【IDBObjectStore】.get(検索文字);
検索自体はデータの書き換えなどはしませんから、transactionでは第２引数は指定せず、そのままデータを検索できるようにしておいてOKです。getの引数は、検索するキーのテキストを指定します。getは、IDBRequestというオブジェクトを返します。

これで得られるデータは、保管した連想配列の形になっています。が、しかしgetで直接結果が得られるわけではありません。getを実行すると、無事検索が完了した場合には、IDBRequestオブジェクトのの「onsuccess」プロパティに設定された関数が呼び出されます。この関数内で、検索結果の処理をするのです。
【IDBRequest】.onsuccess = function(e){
    変数 = e.target.result;
    if (!val) return;
};
このonsuccessに設定される関数では引数が１つ用意されます。この引数のtarget内にあるresultに、検索結果のデータ（連想配列）が保管されているのです。これを取り出し、後はそこから必要なデータを取り出していけばいい、というわけです。

複数のデータが検索された場合は、最初のデータだけが取得されます。また検索されなかった場合には、onsuccessの関数は呼び出されません。

では、これも利用例をあげておきましょう。これは、保管されたオブジェクトストアからデータを検索するサンプルです。入力フィールドに検索するキーの値を入力してボタンを押すと、データを検索し、その内容を表示します。

実際にやってみるとわかりますが、getで得られるのは、全く同じ値のデータのみです。そのテキストを含むデータなどは検索することはできません。
(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type"
	content="text/html; charset=utf-8">
<title>Sample</title>
<style>
h1 {font-size: 14pt; font-weight:bold;
	background-color:#DDF; padding:3px; }
#ftable tr td { background-color:#CFC; }
#datas tr td { background-color:#FCC; }
</style>

<script type="text/javascript">
var IDBTransaction;
var IndexedDB;
var db;
var objectStore;

function initial(){
	IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
	try {
		IndexedDB = mozIndexedDB;
	} catch(e){}
	try {
		IndexedDB = webkitIndexedDB;
	} catch(e){}
	var request = IndexedDB.open("MyTestDatabase");
	
	request.onerror = function(event) {
		alert("ERROR!");
	};
	request.onsuccess = function(event) {
		db = request.result;
		createObjectStoreMethod();
		//alert("OK!");
	};
}

function createObjectStoreMethod(){
	var request = db.setVersion("1.0");
	request.onerror = function(event) { /* ERROR */ };
	request.onsuccess = function(event) {
		try {
			objectStore = db.createObjectStore("mydata", { keyPath: "name" });
			objectStore.createIndex("name", "name", { unique: true });
		}catch(e){}
	};
}

function doFind(){
	if (!db) return;
	var datas = document.getElementById("ftable");
	for (var i =datas.childNodes.length-1; i>=0; i--){
		datas.removeChild(datas.childNodes[i]);
	}
	var fstr = document.getElementById("fstr").value;
	var objectStore = db.transaction("mydata").objectStore("mydata");
	var re = objectStore.get(fstr);
	re.onsuccess = function(e){
		var val = e.target.result;
		if (!val) return;
		var tr = document.createElement("tr");
		var td1 = document.createElement("td");
		td1.innerHTML = val.name;
		tr.appendChild(td1);
		var td2 = document.createElement("td");
		td2.innerHTML = val.email;
		tr.appendChild(td2);
		var td3 = document.createElement("td");
		td3.innerHTML = val.tel;
		tr.appendChild(td3);
		datas.appendChild(tr);
	};
}
</script>
</head>

<body onload="initial();">
<h1>Index DB Sample.</h1>
<div>
<input type="text" id="fstr">
<input type="button" onclick="doFind();" value="Find">
</div>
<table id="ftable" width="400px"></table>
</body>
</html>
※関連コンテンツ
<< prev next >>

「JavaScriptによるHTML5プログラミング入門」に戻る