IndexedDB 動作サンプル１行メモ

IndexedDB を使うと web ブラウザでデータベースが使えるぞ。これとCache API あたりを使えば OS 気にせずオフラインでも動くアプリが作れるね。てことで、IDB API で遊んでみる。必要なのは、HTML とJavaScript、データベースの基礎知識。そして SSL化したサイト。

↑リンク先で動作確認できます。ワードプレス上だとコード干渉でうまく動作しません。よって、当サイトの添付ファイルページです。m(_ _)m

IndexedDB 動作サンプル１行メモのコード

とりまコード。適宜コメントを入れてるので、何をやってるかはわかるはず。てか、お願いわかって！

流れとしては、HTML でリストとフォームを用意。ソコにJS でデータベース処理。DOM で画面表示。

<html><body>
<ul></ul>
<form>
<label for="body">memo</label>
<input id="body" type="text" required>
<button>メモ</button>
</form>

<script>
const list = document.querySelector('ul');
const bodyInput = document.querySelector('#body');
const form = document.querySelector('form');
const submitBtn = document.querySelector('form button');

let db;

window.onload = function() {
// データベース名 memo バージョン 1 を開く。または新規作成
	let request = window.indexedDB.open('memo', 1);
	request.onerror = function() {
		console.log('データベース開けず');
	};
	request.onsuccess = function() {
		console.log('データベース開いたよ');
		db = request.result;
	// データがあるなら表示
		displayData();
	};

// 新規、バージョンアップ時にデータベースをセットアップ
	request.onupgradeneeded = function(e) {
	// 既存データベースの参照取り
		let db = e.target.result;

	// memo を入れるオブジェクトストア作成。キー番号は自動付与
		 let objectStore = 
			db.createObjectStore('memo', 
			{ keyPath: 'id', autoIncrement:true });

	// オブジェクトストアの中身を定義
		objectStore.createIndex('body', 'body', { unique: false });
		console.log('セットアップできたよ');
	};

// ボタン押下でデータベース書き込み、画面表示
	form.onsubmit = addData;
	function addData(e) {
		e.preventDefault();
		let newItem = { body: bodyInput.value };
		let transaction  = db.transaction(['memo'], 'readwrite');
		let objectStore = transaction.objectStore('memo');
		var request = objectStore.add(newItem);

		request.onsuccess = function() {
			bodyInput.value = '';
		};

		transaction.oncomplete = function() {
			console.log('処理終了');
			displayData();
		};

		transaction.onerror = function() {
			console.log('処理失敗');
		};
	};

// displayData() を定義
	function displayData() {
	// 重複防止
		while (list.firstChild) { list.removeChild(list.firstChild); }
	// 	オブジェクトストアを開き、結果を変数 cursor へ
		let objectStore = 
			db.transaction('memo').objectStore('memo');
		objectStore.openCursor().onsuccess = function(e) {
			let cursor = e.target.result;
			if(cursor) {
		// リストアイテム作成。メモ内容や消去ボタンなど
				let listItem = document.createElement('li');
				list.appendChild(listItem);
				listItem.textContent = cursor.value.body;
				listItem.setAttribute('id', cursor.value.id);

				let deleteBtn = document.createElement('button');
				listItem.appendChild(deleteBtn);
				deleteBtn.textContent = '消去';
				deleteBtn.onclick = deleteItem;
		// 次レコードへ移動。
				cursor.continue();
			} else {
		// リストアイテムが空の処理
				if(!list.firstChild) {
					let listItem = document.createElement('li');
					listItem.textContent = 'memo ないっす';
					list.appendChild(listItem);
				}
				console.log('memo 表示完了');
			}
		};
	}

// deleteItem() を定義
	function deleteItem(e) {
		let memoId =
			 Number(e.target.parentNode.getAttribute('id'));
		let transaction = db.transaction(['memo'], 'readwrite');
		let objectStore = transaction.objectStore('memo');
		let request = objectStore.delete(memoId);

		transaction.oncomplete = function() {
			e.target.parentNode.parentNode
				.removeChild(e.target.parentNode);
			console.log('memo ' + memoId + ' 消去');

			if(!list.firstChild) {
				let listitem = document.createElement('li');
				listItem.textContent = 'memo ないっす';
				list.appendChild(listItem);
			}
		}
	}
};
</script>
</body></html>

下記参考リンクの当時（今も？）英語ページを訳しながら、必要な部分を抜き出しました。

参照 Client-side storage – ウェブ開発を学ぶ | MDN

IndexedDB 動作サンプル １行メモ

IndexedDB 動作サンプル １行メモ のコード

コメント

コメントを残す

IndexedDB 動作サンプル１行メモ

IndexedDB 動作サンプル１行メモのコード