HTML5　Chormeで動作するindexedDB　サンプル１　【入門編　第２回】

indexDB

１．indexedDBをオープンします。

/* Chromeのみなので、こんな書き方をしなくても良いのですが。 */
if (window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB) {
	var indexedDB		= window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
	var IDBTransaction	= window.IDBTransaction || window.webkitIDBTransaction || window.mozIDBTransaction;
	var IDBKeyRange		= window.IDBKeyRange || window.webkitIDBKeyRange || window.mozIDBKeyRange;
	var IDBCursor		= window.IDBCursor || window.webkitIDBCursor;

	/* IndexedDBをオープンします。*/
	var IDBreq	= indexedDB.open(idbProp.name);
} else {
	alert('このブラウザではindexedDB は利用できません');
}

２．オブジェクト・ストアを作成します。

/* IndexedDBオープン成功時に呼び出されるコールバック関数 */
IDBreq.onsuccess	= function (event) {
	idb	= this.result;
	/* IndexedDBのバージョン・チェック */
	if (idbProp.ver != idb.version) {
		/* IndexedDBにバージョンをセット */
		var req	= idb.setVersion(idbProp.ver);
		/* バージョン・セット成功時に呼び出されるコールバック関数 */
		req.onsuccess	= function (event) {
			/* オブジェクト・ストアの作成 */
			var store	= idb.createObjectStore(
				idbProp.storeName,
				{ keyPath: 'sKey', autoIncrement: false }
			);
			/* 検索キーを作成します */
			var index	= store.createIndex('indexKey', 'sKey');
		};
	}
};

３．データを登録します。

/* ボタンを押下しデータを登録します。 */
$('#set').click(function(){
	/* トランザクション経由でオブジェクトの保存 */
	var trans	= idb.transaction(idbProp.storeName, IDBTransaction.READ_WRITE);
	var store	= trans.objectStore(idbProp.storeName);

	/* データの内容 */
	var data	= {
		sKey : $('#skey').val(),
		title : $('#title').val(),
		content : $('#content').val(),
		postDate : getDate()
	};
	/* データをセットします */
	var res	= store.put(data);
});

４．データを検索します。

/* ボタンを押下しデータを検索します。 */
$('#show').click(function(){
	var key		= $('#getkey').val();
	/* トランザクション経由でオブジェクトの取得 */
	var trans	= idb.transaction(idbProp.storeName, IDBTransaction.READ_WRITE);
	var store	= trans.objectStore(idbProp.storeName);
	var req		= store.get(key);

	req.onsuccess = function (event) {
		if (this.result === undefined) {
			alert('指定キーで保存されているデータはありません');
		} else {
			listout(this.result.sKey, this.result.title, this.result.content, this.result.postDate, false);
		}
	};
});

５．レンジを作成し、データを検索します。

/* ボタンを押下しデータを検索します。 */
$('#showIndex').click(function(){
	/* レンジの作成 */
	var range	= IDBKeyRange.bound('0', '99999999');
	var trans	= idb.transaction(idbProp.storeName, IDBTransaction.READ_WRITE);
	var store	= trans.objectStore(idbProp.storeName);

	/* インデックスからデータを検索し取得 */
	var req		= store.openCursor(range, IDBCursor.NEXT);
	$('#list').html('');

	req.onsuccess	= function (event) {
		if (this.result === undefined) {
			/* データが無い場合の処理 */
			alert('検索結果がありません。');
		} else {
			if(this.result != null){
				listout(this.result.value.sKey, this.result.value.title, this.result.value.content, this.result.value.postDate, true);
				/* 次の検索結果でonsuccessコールバック関数を呼び出す */
				this.result.continue();
			}
		}
	};
});

次回に全体ソースを載せる予定です。
お楽しみに！