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

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

作成:2011-09-19 09:26
更新:2012-04-09 16:18

■add/putによるデータの追加・削除

では、いよいよデータベースを利用します。まずはデータの追加から行ってみましょう。データの追加は、データストア（IDBObjectStore）に用意されている「add」または「put」というメソッドを用いて行います。これらは以下のように呼び出します。
【IDBObjectStore】.add( 連想配列 );
【IDBObjectStore】.put( 連想配列 );
addとputは、いずれも同じものですので、使いやすい方を使えばいいでしょう。今のところ、FirefoxもChromeも両方をサポートしているようです。注意すべきは、オブジェクトストアに保存するデータの形式でしょう。

add/putに保存するデータは、連想配列の形でデータをまとめておきます。オブジェクトストアでは、それぞれのデータには、そのデータの保管場所の名前（キー）が指定されます。これを使って、それぞれのキーごとに値を指定しておくのです。

このとき注意しておきたいのは、「必ずインデックスに指定したキーの値を含める」という点です。先に、createObjectStoreでオブジェクトストアを作成した際、{ keyPath: "name" }という引数を指定していたのを思い出してください。これで、"name"という項目がデータの管理に用いられることが指定されました。ということは、保管するデータには必ずnameという項目の値を用意しておく、ということになるわけです。

もう１つ、add/putで注意したいのは、実は「IDBObjectStoreの用意」に関する部分です。オブジェクトストアを取得する際、transaction(オブジェクトストア名)というメソッドを呼び出してIDBTransactionを取得し、そのobjectStoreでオブジェクトを取り出します。が、これだけだと、add/putでは例外が発生し、データの保管はできないのです。なぜか？というと、transaction()で取得されるIDBTransactionからは、「読み取り専用」のオブジェクトストアしか取得されないからです。

すなわち、読み取り専用のオブジェクトストアでは、データの保存ができないのです。読み書き可能なオブジェクトストアを取得するためには、transaction時に第２引数を指定してやる必要があります。
transaction("mydata",IDBTransaction.READ_WRITE);
第２引数に、IDBTransactionの「READ_WRITE」を指定することで、読み書き可能なオブジェクトストアを取り出すことができるようになります。このIDBTransactionは、先にinitial
関数でオブジェクトを設定した変数でしたね。

■データの削除
続いて、データの削除についても触れておきましょう。これもIDBTransaction.READ_WRITEを指定してオブジェクトストアを用意します。そして、以下のように「delete」を呼び出します。
【IDBObjectStore】.delete( キーの値 );
引数には、キーに指定した値を渡します。例えば、delete("taro")なら、nameに"taro"と指定したデータが削除されるわけです。

では、実際の利用例をあげておきましょう。下のリストを見てください。これは、名前・メールアドレス・電話番号といった項目を入力し、データとして保存するサンプルです。ここでは、入力フィールドの値をそれぞれ変数に取り出した後、以下のようにしてデータの保存をしています。
var data = { name: nstr, email: estr, tel:tstr };
var objectStore = db.transaction([],IDBTransaction.READ_WRITE).
        objectStore("mydata");
objectStore.put(data);
オブジェクトストアを取得し、putでデータを保存しています。データは、dataという連想配列にまとめてありますね。みればわかるように、今回はname、email、telといった項目を持つデータを保管しています。そして、nameの値を使ってデータを管理するようにしている、というわけです。
(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 addData(){
	if (!db) return;
	var nstr = document.getElementById("name").value;
	var estr = document.getElementById("email").value;
	var tstr = document.getElementById("tel").value;
	var data = { name: nstr, email: estr, tel:tstr };
	var objectStore = db.transaction("mydata",IDBTransaction.READ_WRITE).objectStore("mydata");
	objectStore.put(data);
}
</script>
</head>

<body onload="initial();">
<h1>Index DB Sample.</h1>
<input type="text" id="name"><br>
<input type="text" id="email"><br>
<input type="text" id="tel"><br>
<input type="button" value="Add" onclick="addData();">
</body>
</html>
※関連コンテンツ
<< prev next >>

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