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

■IDBObjectStoreの作成と削除

IDBDatabaseオブジェクトは、これ自体はデータベースにデータを保存したりはできません。ここから「オブジェクトストア」と呼ばれるオブジェクトを作成します。

このオブジェクトストアは「IDBObjectStore」というオブジェクトで、データベースへのデータの保存や検索など、基本的なデータ操作のための機能を提供するものです。これは保存するデータごとに作成することができます。つまり、１つのデータベースであっても、いくつかの種類のデータを保存する場合は、それぞれにIDBObjectStoreが用意されるわけです。

このIDBObjectStoreを用意する場合、注意しなければならないのは「既にIDBObjectStoreがあるかどうかによって処理が違う」という点でしょう。データベースはローカルボリュームに保存されますから、一度作成してしまえば、以後はブラウザを終了したりしてもデータベースは保管され続けられます。したがって、最初にデータベースを利用するときには「IDBObjectStoreを新たに作成する」ことになりますが、二回目以降は「既にあるIDBObjectStoreを取得する」ということになります。では、これもそれぞれの機能の使い方をざっと整理しておきましょう。

・IDBObjectStoreの作成

変数 = 【IDBDatabase】.createObjectStore( 名前, 連想配列 );

新たにIDBObjectStoreを作成するものです。引数にはデータの名前、必要な設定情報を渡すための連想配列を渡します。この連想配列には、通常「keyPath」と呼ばれる値を用意します。これはデータベース検索時に用いられる「キー」となる項目名を指定するものです。

・インデックスの作成

【IDBObjectStore】.createIndex(名前, キー名, 連想配列 );

<!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){}
	};
}
</script>
</head>

<body onload="initial();">
<h1>Index DB Sample.</h1>
</body>
</html>