이번 포스팅 내용은 HTML5의 Web SQL Database에 대하여 알아보도록 하자

HTML5의 Web SQL을 사용하고자 하려면 다음 브라우저 환경에서 진행을 하여야 한다

아쉽게도 IE와 Firefox에서는 지원을 하지 않는다

본인이 테스트해보면서 이해한 바로는 브라우저 내에 캐쉬 형식으로 데이터를 보유하고 있는거 같다

사용법은 일반 JAVA 에서 사용하는 JDBC와 거의 90% 흡사하다고 보면 되겠다

간단하게 jquery를 이용하여 예를들도록 해보겠다

<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.min.js'></script>

위와같이 jquery CDN을 INCLUDE 한 후에

HTML 코드를 다음처럼 삽입하자

<input type="button" id="createtable" value="CREATETABLE"/>
<input type="button" id="select" value="SELECT"/>
<input type="button" id="insert" value="INSERT"/><br/>
<!-- 입력타입  -->
입력값
<div>
<input type="text" id="test"/>
</div>
목록
<!-- 목록 -->
<div id="selectlist">
	<ul>
	</ul>
</div>

위와같이 삽입을 한 후 다음으로는 HTML5 WEB SQL을 위한 스크립트 코드를 작성하여 보자

$(function(){
		$("#createtable").click(function(){
			var db = openDatabase("test", "1.0", "test WebDB", 5 * 1024* 1024);
			db.transaction(function(execute) {
						var createQuery = "CREATE TABLE IF NOT EXISTS test(id INTEGER PRIMARY KEY, test TEXT )";
						execute.executeSql(createQuery);
						alert("TABLE 생성완료!!");
			});
		})
		
		$("#select").click(function(){
			var db = openDatabase("test", "1.0", "test WebDB", 5 * 1024* 1024);
					db.transaction(function(execute) {
						var sql = "SELECT * FROM test ORDER BY id DESC";
						execute.executeSql(sql, undefined, function(execute, result) {
									if (result.rows.length > 0) {
										var r = "";
										for (var i = 0; i < result.rows.length; i++) {
											var row = result.rows.item(i);
											r+="<li>";
											r+="<input type='text' value='"+row.test+"' id='"+row.id+"' name='test' />";
											r+="<input type='button' name='update' value='UPDATE'/>";
											r+="<input type='button' name='delete' value='DELETE'/>";
											r+="</li>";
										}
										$("#selectlist > ul").html(r);
									}
						}, function() {
							alert("조회 에러");
						});
					});
		})
		
		$("#insert").click(function(){
			var db = openDatabase("test", "1.0", "test WebDB", 5 * 1024* 1024);
			db.transaction(function(execute) {
				var insertQuery = "INSERT INTO test(test) VALUES(?)";
				execute.executeSql(insertQuery, [$("#test").val()], function(transaction,resultSet) {
							alert("등록 완료")
						}, function() {
							alert("등록 에러");
						});
			});
		})
		
		$(document).on("click","input[name=update]",function(){
			var id = $(this).parent().find("input[type=text]").attr("id");
			var value = $(this).parent().find("input[type=text]").val();
			var db = openDatabase("test", "1.0", "test WebDB", 5 * 1024* 1024);
			db.transaction(function(execute) {
				var insertQuery = "UPDATE test SET test = ? WHERE id = ?";
				execute.executeSql(insertQuery, [value,id], function(transaction,resultSet) {
							alert("수정 완료")
						}, function() {
							alert("수정 에러");
						});
			});
		})
		
		$(document).on("click","input[name=delete]",function(){
			var id = $(this).parent().find("input[type=text]").attr("id");
			var db = openDatabase("test", "1.0", "test WebDB", 5 * 1024* 1024);
			db.transaction(function(execute) {
				var deleteQuery = "DELETE FROM test WHERE id = ?";
				execute.executeSql(deleteQuery, [id], function(transaction,resultSet) {
							alert("삭제 완료")
						}, function() {
							alert("삭제 에러");
						});
			});
		})
	})

위코드를 기준으로 설명을 하자면 'createtable' id의 버튼 클릭시 WEB STORAGE내에 test라는 

DB명 접속후 'test' 테이블을 생성한다

CRUD 예제를 위해 간단하게 test 컬럼과 pk인 id 컬럼 2개를 생성하였다

이제는 테스트를 위하여 위의 코드를 실행 후 동작을 시켜보도록 하자

WEB DB 생성전 Resources 탭에 Web SQL 을 보시면 테이블이 현재 존재하지 않음

화면의 createtable 버튼을 클릭하면 alert으로 "TABLE 생성완료!!"라는 경고창이 출력되면서 WEB SQL내에 WEB DB가 생성됨

최초 DB에는 테이블이 존재하지 않으므로 TEXT태그에 값을 입력 후 INSERT버튼을 클릭해봄

INSERT하였으니 이어서 SELECT 버튼을 클릭하여 WEB SQL에 등록된 데이터를 화면에 출력시켜보도록 함

정상적으로 INSERT 데이터들이 목록에 출력이 되었을것임

마지막으로 UPDATE/DELETE 를 한 ROW당 테스트를 해본 후 

페이지를 새로고침 한다음 UPDATE/DELETE 기능까지 

정상적으로 출력이 되는지 확인해보도록 하자