※ 출처 : "실전 HTML5 가이드" 한국웹표준커뮤티니
Web SQL Database는 HTML5와 함께 새로 생겨난 것이다.
이제부터 클라이언트 웹 개발자들은 풍부한 쿼리 능력을 가진 웹 애플리케이션을 만들 수 있게 되었다. SQL 쿼리를 별도로 익혀야하는 노고가 뒤따르지만 온라인 또는 오프라인 여부에 상관없이 사용 가능하며, 클라이언트의 저장소에 영구히 보존할 수 있고, 리소스 점유율이 많은 덩치큰 데이터를 체계적으로 관리 할 수 있다.
Web Database를 사용하는 대부분의 사례가 비동기API를 사용한다. 비동기API는non-blocking 시스템이다. 그리고 리턴값을 통해서는 데이타를 얻지 못한다. 때문에 정의된 콜백 함수에 데이터를 전달하게 된다.
Web Database는HTML을 통한 트랜잭션이다. 이것은 외부에서 SQL 문을 실행할 수 없다. 트랜잭션은 두 종류로 구분되는데, 읽고 쓰기위한 트랜잭션(transaction())과 읽기 전용 트랜잭션(readTransaction())이다. 그리고 주의해야 할 점은 데이터를 읽고 쓸 때 전체 데이터베이스가 잠겨버린다는 점이다.
데이터베이스 열기
varhtml5rocks = {}; html5rocks.webdb = {}; html5rocks.webdb.db = null; html5rocks.webdb.open = function() { var dbSize = 5 * 1024 * 1024;// 5MB html5rocks.webdb.db =openDatabase('Todo', '1.0', 'todo manager', dbSize); } html5rocks.webdb.onError = function(tx,e) { alert('예기치 않은 오류가 발생하였습니다: ' +e.message ); } html5rocks.webdb.onSuccess = function(tx,r) { // 모든 데이터를 다시 그림 html5rocks.webdb.getAllTodoItems(tx,r); } |
테이블 생성하기
html5rocks.webdb.createTable = function() { html5rocks.webdb.db.transaction(function(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS ' + 'todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)', []); }); } |
테이블에 데이터 추가하기
html5rocks.webdb.addTodo = function(todoText) { html5rocks.webdb.db.transaction(function(tx){ tx.executeSql('INSERT INTO todo(todo, added_on) VALUES (?,?)', [todoText,addedOn], html5rocks.webdb.onSuccess, html5rocks.webdb.onError); }); } |
테이블에서 테이터 조회하기
html5rocks.webdb.getAllTodoItems = function(renderFunc) { html5rocks.webdb.db.transaction(function(tx) { tx.executeSql('SELECT * FROM todo', [], renderFunc, html5rocks.webdb.onError); }); } |
여기에 사용된 명령 예제는 모두 비동기이다.
이러한 경우 transaction 또는 executeSql 호출시 데이터가 반환되지 않는다.
데이터는 반드시 콜백을 통해 전달된다는 사실을 기억하자!!
가져온 데이터 처리하기
functionloadTodoItems(tx,rs) { var rowOutput = ""; for (vari=0;i <rs.rows.length;i++) { rowOutput +=renderTodo(rs.rows.item(i)); } var todoItems =document.getElementById('todoItems'); todoItems.innerHTML =rowOutput; } functionrenderTodo(row) { return '<li>' +row.ID + '[<a onclick="html5rocks.webdb.deleteTodo(' +row.ID + ');"'>X</a>]</li>'; } |
테이블에서 데이터 제거하기
html5rocks.webdb.deleteTodo = function(id) { html5rocks.webdb.db.transaction(function(tx) { tx.executeSql('DELETE FROM todo WHERE ID=?', [id], loadTodoItems,html5rocks.webdb.onError); }); } |
초기화 및HTML 구성하기
<script> .... functioninit() { html5rocks.webdb.open(); html5rocks.webdb.createTable(); html5rocks.webdb.getAllTodoItems(loadTodoItems); } functionaddTodo() { var todo =document.getElementById('todo'); html5rocks.webdb.addTodo(todo.value); todo.value = ''; } </script> <body onload="init();"> <form type="post" onsubmit="addTodo(); return false;"> <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;"/> <input type="submit" value="Add Todo Item"/> </form> |
※ 데모 : http://html5.firejune.com/demo/webdb.html
- 데모 소스
|
