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

■データの一覧表示

検索のように特定のデータだけをピックアップする他に、「すべてのデータを取り出して処理する」というようなことも必要な場合があります。これには、getとはまた別のアプローチが必要となるでしょう。

データを纏めて取り出す場合には「カーソル」というものを利用します。これは「openCursor」というメソッドを使って利用します。

変数 =【IDBObjectStore】.openCursor();

これで変数には、IDBRequestオブジェクトが返されます。このIDBRequestでは、openCursorが成功すると、onsuccessの関数が呼び出されます。ここで渡される引数から、必要な情報を取得します。

【IDBRequest】.onsuccess = function(event){
    変数 = event.target.result;
}

<!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){}
		createList();
	};
}

function createList(){
	if (!db) return;
	var datas = document.getElementById("datas");
	for (var i =datas.childNodes.length-1; i>=0; i--){
		datas.removeChild(datas.childNodes[i]);
	}
	var objectStore = db.transaction("mydata").objectStore("mydata");
	var re = objectStore.openCursor();
	re.onsuccess = function(event){
		var cur = event.target.result;
		if (!cur) return;
		var val = cur.value;
		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);
		cur.continue();
	};
}
</script>
</head>

<body onload="initial();">
<h1>Index DB Sample.</h1>
<table id="datas" width="400px"></table>
</body>
</html>