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

indexedDBサンプルソース第２弾

今回はソース全体を。
このソースはjqueryを利用しています。

jQueryを利用したソース

indexedDB.htmlの内容

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>indexedDB</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<meta http-equiv="Content-Style-type" content="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

<script type="text/javascript">
	var idbProp	= {
		ver : '1.0',
		name : 'idbSample',
		storeName : 'keyStore'
	};

	var idb			= null;

	$(document).ready(function(){
		/* 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();
					}
				}
			};
		});
	});

	function listout(sKey, title, content, postDate, add){
		var cont = content.replace(/rn/g, '<br />');
		cont = cont.replace(/(n|r)/g, '<br />');
		$('#list').html(
			(add ? $('#list').html() : '') +
			'<li>[' + sKey + ']<br/><strong>' + title + '</strong><br/>' + cont + '<br/>登録日(' + postDate + ')</li>'
		);
	}

	function getDate(){
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var day = date.getDate();

		if ( month < 10 ) {
			month = '0' + month;
		}
		if ( day < 10 ) {
			day = '0' + day;
		}

		return year + '/' + month + '/' + day;
	}

</script>

</head>
<body>
<h1>indexedDBサンプル</h1>
<br/>
<div>
<table>
	<tr>
		<th>日付</th>
		<td><input type="text" id="skey" />(YYYYMMDD形式)</td>
	</tr>
	<tr>
		<th>タイトル</th>
		<td><input type="text" id="title" /></td>
	</tr>
	<tr>
		<th>詳細内容</th>
		<td><textarea id="content"></textarea></td>
	</tr>
	<tr>
		<th colspan="2"><input type="button" id="set" value="設定" /></th>
	</tr>
</table>
</div>
<br />
<hr />
<div>
取得したい値のキーを入力してください。<input type="text" id="getkey" />
<input type="button" id="show" value="値の取得" />
<input type="button" id="showIndex" value="一覧の取得" />
</div>
<div>
<ul id="list">
</ul>
</div>
</body>
</html>

style.cssの内容

* {font-size:12px; color: #666; margin:3px; padding:0px;}

input[type=button]{width:120px;height:30px;}
input[type=text]{width:350px;padding:3px;background:#fff;}
textarea{width:550px;height:150px;padding:3px;background:#fff;}

table th {background:#fff;padding:5px;}
table td {background:#fff;padding:5px;}

div{margin-left:30px;line-height:20px;}

li{background:#eee;border:1px solid #aaa;list-style-type:decimal;margin-right:30px;padding:10px;}

随分と雑なcssで申し訳ないです。

実際の画面はこんな感じです。