Chrome Packaged Apps, Indexed DB編 2014-06-06

Chrome Packaged AppsのIndexed DB操作などについて。
HTML5の内容になり、Packagedに依存する部分は無いかと思いますが。
クライアント開発で使える技術かと思いますので、メモです。

*)Indexed DBは、開発中の製品でも実績が無いため、
 サンプル作りがあまい部分あります。。

Project: https://github.com/kuc-arc-f/chrome_db1

対応ブラウザなどのチェック、
今回は、Chromeのみで必要無いと思いますが、
window.indexedDB などを、一般的に起動時チェック方法ありそうです。

	function init_proc()
	{
	if (window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB) {
	console.log('OK: use indexedDB');
	}else{
	console.log('NG: use indexedDB');
	}
	var db= new DbHelper();
	db.getInstance();
	}

view raw c0606-db1-top1.js hosted with ❤ by GitHub

[ＤＢ初期化など]
ＤＢ存在しない場合、
onupgradeneeded() が呼ばれ、ストア作成する。
key:Id
Index : name
とかにしときます。(一旦、db.close() しときます。)

	DbHelper.prototype.getInstance = function( ) {
	var db=null;
	//open
	var rq = indexedDB.open(DB_NAME);
	rq.onupgradeneeded = function(result) {
	console.log('#onupgradeneeded');
	db = this.result;
	var store = db.createObjectStore(STORE_NAME, {
	keyPath: 'id', // key= id
	autoIncrement: false,
	});
	store.createIndex('byName', 'name');
	db.close();
	};
	};

view raw c0606-db1-top2.js hosted with ❤ by GitHub

[データ追加]　HTML
追加の入力欄作成します。
id
name
kana　など

	<form name="form1">
	id (int):
	<input type="text" id="id-text-id" value=""></input ><br />
	name:
	<input type="text" id="id-text-name" value=""></input ><br />
	kana:
	<input type="text" id="id-text-kana" value=""></input ><br />
	</form><br />
	<a href="#" id="id-a-add" >[ add ]</a><br />
	<br />
	<a href="#" id="id-a-show" >[ show ]</a><br />
	<hr />

view raw c0606-db1-top1.htm hosted with ❤ by GitHub

[データ追加]
 store に、putします。
*)
トランザクション開始＞ストアへPUT みたいな流れ。
key=id なので、重複値(id)は、追加されないようです。

	DbHelper.prototype.proc_addItem = function(item ,view)
	{
	var rq = indexedDB.open(DB_NAME);
	rq.onsuccess = function(e) {
	console.log('#onsuccess_open');
	var db= e.target.result;
	var tx = db.transaction(STORE_NAME, 'readwrite');
	tx.oncomplete = function() { };
	var store = tx.objectStore(STORE_NAME);
	var request =store.put({
	id : parseInt(item.id ),
	name : item.name,
	nameKana: item.kana
	});
	request.onsuccess = function(e) {
	console.log('#onsuccess_add');
	db.close();
	proc_addComplete(view);
	}
	}
	};

view raw c0606-db1-top3.js hosted with ❤ by GitHub

*) 続きは、続編（表示系の処理）
に記載予定です。
http://knaka0209.blogspot.jp/2014/06/chromedb1-2.html

*)まとめ一覧。こちら、
http://knaka0209.blogspot.jp/2014/06/chrome-pkg.html