[HTML5] Indexed DBで検索結果をキャッシュする #2

#HTML5

石上慎太郎

2013.11.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Indexed DBで検索結果をキャッシュする #1 の続きです。

実装

データ構造

テストデータはタブ改行区切りとし、以下のオブジェクトに変換してオブジェクトストアに格納します。

	｛
		id:連番,
		name:"氏名",
		nameKana:"氏名カナ",
		sex:"性別",
		bloodtype:"血液型",
		birthday:"誕生日",
		zipcode:"郵便番号",
		address:"住所",
		addressKana:"住所カナ"
	}

画面

ソート項目・ページ数を選択するプルダウンと、一覧のテーブル、詳細表示で構成された画面を用意します。

	<select id="sort">
		<option value="">id</option>
		<option value="byNameKana">氏名カナ</option>
		<option value="byZipcode">郵便番号</option>
	</select>
	<select id="pager"></select>
	<input id="nameKana" type="text" placeholder="氏名カナ" />
	<button id="find">find</button>

	<table id="personTable">
		<thead>
			<tr>
				<th>id</th>
				<th>氏名</th>
				<th>氏名カナ</th>
				<th>郵便番号</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
	
	<dl>
		<dt>id</dt><dd id="lId"></dd>
		<dt>氏名</dt><dd id="lName"></dd>
		<dt>氏名カナ</dt><dd id="lNameKana"></dd>
		<dt>性別</dt><dd id="lSex"></dd>
		<dt>血液型</dt><dd id="lBloodType"></dd>
		<dt>誕生日</dt><dd id="lBirthday"></dd>
		<dt>郵便番号</dt><dd id="lZipcode"></dd>
		<dt>住所</dt><dd id="lAddress"></dd>
		<dt>住所カナ</dt><dd id="lAddressKana"></dd>
	</dl>

データベース初期化

Indexed DB を使用する準備を行います。

	//データベース名
	var DB_NAME = 'indexed_db_sample';
	
	//オブジェクトストア名
	var STORE_NAME = 'person';

	//データベース
	var db;

	//データベース接続
	var rq = indexedDB.open(DB_NAME);

	//データベースが無い場合は作成する
	rq.onupgradeneeded =  function(result) {
		db = this.result;
		
		//オブジェクトストアの作成
		var store = db.createObjectStore(STORE_NAME, {
			keyPath: 'id',		  //「id」フィールドをキーとする
			autoIncrement: false,   //キーの自動採番オフ
		});
		
		//インデックスの作成
		store.createIndex('byNameKana', 'nameKana');
		store.createIndex('byZipcode', 'zipcode');
	};
	
	//接続完了
	rq.onsuccess = function() {
		//データ取得処理・・・
	}

indexedDB オブジェクトの open メソッドでデータベースを開きます。もしデータベースが存在しない場合、onupgradeneeded のコールバックが呼び出されます。このコールバック内は特別なトランザクションがアクティブとなっており、ここでのみオブジェクトストアやインデックスの作成が行えます。トランザクションについては後程もう少し詳しく説明します。
ここでは、"person" という名前で、オブジェクトストアを作ります。id をキーとし、nameKana と zipcode にインデックスを作成します。

データ取得・Indexed DB への書き込み

テストデータを読み込み、変換してオブジェクトストアに保存します。

$.ajax({ url:'testdata.txt', dataType:'text', success:function(data, textStatus, jqXHR) {

//トランザクション開始　readwriteモード var tx = db.transaction(STORE_NAME, 'readwrite');

//トランザクション完了時のコールバック tx.oncomplete = function() { //リストの描画処理・・・ }

//トランザクションを介してオブジェクトストアを参照 var store = tx.objectStore(STORE_NAME);

//行に分割 var rows = data.split('\r\n'); for(var i=0, l=rows.length; i < l; i++) { //列に分割 var cols = rows[i].split('\t'); if(cols.length == 9) { //オブジェクトストアに格納 store.put({ id: parseInt(cols[0]),//数値としてソートしたい場合、変換を忘れずに！ name: cols[1], nameKana: cols[2], sex: cols[3], bloodType: cols[4], birthday: cols[5], zipcode: cols[6], address: cols[7], addresskana: cols[8] }); } } } }); [/javascript]

トランザクションを開始する際には、モードを指定します。参照のみの場合は readonly 、データの登録更新削除を行う場合には readwrite を指定します。ここではデータを登録するので、readwrite を指定しています。オブジェクトストア作成時に、keyPath を id 、autoIncrement を false に指定しているので、登録データ内に必ず id フィールドが必要です。

ちなみに、前述のデータベース初期化時の、onupgradeneeded コールバック内のトランザクションのモードは versionchange という特別なもので、データベース構造の定義はこのモードでしか行えません。また、versionchange モードのトランザクションをマニュアルで開始することはできません。

Indexed DBで検索結果をキャッシュする #3 へ続きます。

Share this article