indexed_db.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>indexed DB</title>
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="jumbotron">
			<h1>My Friends</h1>
		</div>
		<div>
			<form id="addform" class="form-inline">
				<div class="form-group">
					<input type="text" id="fname" placeholder="이름" class="form-control">
				</div>
				<div class="form-group">
					<input type="email" id="femail" placeholder="Email" class="form-control">
				</div>
				<div class="form-group">
					<input type="text" id="fphone" placeholder="전화번호" class="form-control">
				</div>
				<button type="submit" class="btn-add btn btn-default">저장</button>
			</form>
		</div>
	</div>
	<script>

		var db;

		//db open(없으면 생성)
		var request = window.indexedDB.open("adbook",1);

		request.onerror = function(event) {
			console.log("DB Open Error");
		}

		//After DB Open
		request.onsuccess = function(event){
			db = request.result;
		}

		request.onupgradeneeded = function(event){
			var result = event.target.result;
			var objectStore = result.createObjectStore("address",{keyPath:"id", autoIncrement:true});

		}


		$(".btn-add").on("click",function(e){
			e.preventDefault();
			var friend = {};
			friend.fname = $("#fname").val();
			friend.femail = $("#femail").val();
			friend.fphone = $("#fphone").val();
			if( ! friend.fname || ! friend.femail || ! friend.fphone ) {
				alert("모든 항목을 입력하세요.");
				return;
			}
			saveData(friend);
		});

		function saveData(data) {
			var tr = db.transaction(["address"],"readwrite");
			var store = tr.objectStore("address");
			var request = store.add(data);
			request.onsuccess = function(event){
				$("#fname").val("");
				$("#femail").val("");
				$("#fphone").val("");
			}
			request.onerror = function(event){
				console.log("Save Error");
			}
		}
	</script>
</body>
</html>