Indexed Databaseは、クライアントサイドで NoSQL ベースのデータベースを利用するためのインターフェースAPIです。
「Web Storage」の手軽さとデータベースの高速性と機能性を実現するAPIです。
「Web Storage」同様にオリジン(Origin)ごとに固有の領域を持ち、複数のデータベースを保持することができます。
「Web SQL Database」にあるあるSQL方言の懸念を持ちません。
但し、最後発のAPIのため、仕様自体が固まり切れていないホヤホヤのAPIです。

各ブラウザの対応

Indexed Databaseは、2011年8月現在以下の正式に対応を発表しているブラウザがありません。

現時点では indexedDB（IDBFactory）にベンダープリフィックスを付けてアクセスします。
Chrome であれば、webkitIndexedDB。
Firefoxであれば moz_indexedDB、または mozIndexedDB。

※この仕様はまだ策定途中です。最新の仕様を確認しながらお使いください。

Indexed Databaseの使い方は、「オブジェクトストア」という単位でデータ種別を分離します。
オブジェクトストアは、任意のJavascriptオブジェクトを値にとるkey-value型のNoSQL データベースです。
データベースへの接続や作成は、SQLデータベースに似ています。
値への取得・追加は、ストレージに似ています。

データベースの接続

まずデータベースに接続し、データベースオブジェクトを取得します。
前述の通り、現時点では indexedDB（IDBFactory）にベンダープリフィックスを付けてアクセスします。

//Chrome、Firefoxのベンダープリフィックス対応
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.moz_indexedDB;

// データベース接続
var con = indexedDB.open("myDB");

第1引数 : データベース名

データベースに付ける名前

データベース接続の成功と失敗は「success」と「error」イベントとして定義できます。

// 成功時のイベント
con.onsuccess = fucntion(evt){
	var db = evt.result;
}

// 失敗時のイベント
con.onerror = function(error){
	alert(error.message + "(" + error.code + ")");
}

オブジェクトストアの作成

オブジェクトストアは、データを格納容器です。
リレーショナルデータベースのテーブルに相当します。
オブジェクトストア、及びインデックスの作成と削除はデータベースのバージョン変更時にしか行うことができません。
作成時には注意が必要です。

con.onsuccess = fucntion(evt){
	var db = evt.result;

	//オブジェクトストア作成（in-line key として id を指定）
	var tbl = db.createObjectStore("myTable", "id", true);

	//Chromeの場合
	//var tbl = db.createObjectStore("myTable", {"keyPath": "id"}, false);

	//インデックスを作成(省略可)
	tbl.createIndex("name", false);
}

(インデックスデータベースオブジェクト).createObjectStore(オブジェクトストア名, in-line-key, autoIncrement)

オブジェクトストアを作成します。
第1引数には、オブジェクトストアの名前を指定します。
第2引数には、データ内のプロパティをキーとします。データ追加時には、該当プロパティに値が存在する必要があります。
第3引数は、キーの自動インクリメントの有無です。

(インデックスデータベースオブジェクト).createIndex(インデックス名, autoIncrement)

インデックスを作成します。
第1引数には、インデックスキーとなるプロパティ名を指定します。
第2引数は、キーの自動インクリメントの有無です。

トランザクション

データの操作を行うために、トランザクションを開始します。

//Chromeのベンダープリフィックス対応
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;

//トランザクションの開始とオブジェクトストアの取得
var store = db.transaction([], IDBTransaction.READ_WRITE).objectStore("myTable");

IDBTransactionオブジェクト

静的な非同期トランザクションオブジェクトです。

objectStore(オブジェクトストア)

開始されたトランザクションに対し、オブジェクトストアを取得するメソッドです。

データの操作

データの追加、削除はオブジェクトストア単位に行います。

//格納するデータ
var data = 	{
	id			: 10,
	name		: "データ名",
	description	: "データの詳細",
	creat_date	: "2011-8-20",
	update_date	: "2011-8-20",
	author		: "..."
			}
/*
	上記はデータ例です。
	オブジェクト型で定義します。
*/

//データの追加
store.add(data);

//データの削除
store.delete("10");

(オブジェクトストア).add(データオブジェクト)

オブジェクトストアに、データ(オブジェクト)を追加するメソッドです。

(オブジェクトストア).delete(in-line-key)

オブジェクトストアに、データ(オブジェクト)を削除するメソッドです。
in-line-keyは、createObjectStoreメソッドで指定したキーの値です。

データの取得

データの取得はオブジェクトストア単位に行います。

//データの取得
store.get("10");

(オブジェクトストア).get(in-line-key)

オブジェクトストアに、データ(オブジェクト)を取得するメソッドです。
in-line-keyは、createObjectStoreメソッドで指定したキーの値です。

カーソル移動

カーソルとは、オブジェクトストアに格納されているデータ群のうち、現在位置になります。

//in-line keyを用いたカーソル移動
store.get("10").onsuccess = function(evt) {
	/*
		getメソッドで検索し、成功した場合のイベントを定義します。

	*/
	var cursor = evt.target.result;
	alert("id=10は、" + cursor.name );
};

//カーソルの連続移動
store.openCursor().onsuccess = function(evt) {
	var cursor = evt.target.result;
	if (cursor) {
		alert("ID: " + cursor.key
			+ ", Name: " + cursor.value.name
			+ ", description: " + cursor.value.description);
		cursor.continue();
	}
}

データの変更

データの変更は、カーソル単位で行います。

//in-line keyを用いたデータ変更
store.get("10").onsuccess = function(evt) {
	var cursor = evt.target.result;
	if (cursor) {
		var data = cursor.value;
		data.name = "更新データ";
		data.description = "更新されたデータ";
		data.update_date = "2011-08-20";

		//データ変更反映
		cursor.update(data);
		cursor.continue();
	}
};