소개
웹 데이터베이스는 HTML5의 새로운 기능입니다. 웹 데이터베이스는 사용자의 브라우저 내에서 호스팅되고 유지됩니다. 개발자가 다양한 쿼리 기능으로 애플리케이션을 만들 수 있게 됨으로써 온라인과 오프라인에서 작업할 수 있는 새로운 종류의 웹 애플리케이션이 등장할 것으로 기대됩니다.
이 문서의 예제 코드는 매우 간단한 할 일 목록 관리자를 만드는 방법을 보여줍니다. 이 문서는 HTML5에서 사용할 수 있는 일부 기능을 개략적으로 설명한 것입니다.
자격 요건
이 샘플은 네임스페이스를 사용하여 데이터베이스 로직을 캡슐화합니다.
var html5rocks = {};
html5rocks.webdb = {};
비동기식 및 트랜잭션 방식
웹 데이터베이스 지원을 사용하는 대부분의 경우 비동기 API를 사용합니다. 비동기 API는 비차단 시스템이므로 반환 값을 통해 데이터를 가져오는 대신 정의된 콜백 함수로 데이터를 가져옵니다.
HTML을 통한 웹 데이터베이스 지원은 트랜잭션 방식입니다. 트랜잭션 외부에서 SQL 문을 실행할 수는 없습니다.
트랜잭션에는 읽기/쓰기 트랜잭션 (transaction())과 읽기 전용 트랜잭션 (readTransaction())의 두 가지 유형이 있습니다. 읽기/쓰기는 전체 데이터베이스를 잠급니다.
1단계: 데이터베이스 열기
데이터베이스에 액세스하려면 먼저 해당 데이터베이스를 열어야 합니다.
데이터베이스의 이름, 버전, 설명, 크기를 정의해야 합니다.
html5rocks.webdb.db = null;
html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
}
html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}
html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
// loadTodoItems is defined in Step 4a
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
2단계: 표 만들기
트랜잭션 내에서 CREATE TABLE SQL 상태를 실행해야만 테이블을 만들 수 있습니다.
본문 onload 이벤트에 테이블을 만드는 함수를 정의했습니다. 테이블이 아직 없으면 테이블이 생성됩니다.
이 테이블은 todo라고 하며 3개의 열이 있습니다.
- ID - 증분 순차 ID 열
- todo - 항목의 본문인 텍스트 열
- added_on - 할 일 항목이 생성된 시간
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS " +
"todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
});
}
3단계: 테이블에 데이터 추가
우리는 할 일 목록 관리자를 빌드하고 있으므로 데이터베이스에 todo 항목을 추가할 수 있는 것이 매우 중요합니다.
트랜잭션이 생성되고 트랜잭션 내에서 todo 테이블에 대한 INSERT가 수행됩니다.
launchSql은 실행할 SQL과 쿼리를 결합하기 위한 매개변수 값 등 여러 매개변수를 사용합니다.
html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
[todoText, addedOn],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
4단계: 테이블에서 데이터 선택
이제 데이터가 데이터베이스에 있으므로 데이터를 다시 가져오는 함수가 필요합니다. Chrome에서는 Webdatabase가 표준 SQLite SELECT 쿼리를 사용합니다.
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
html5rocks.webdb.onError);
});
}
이 샘플에서 사용된 이러한 명령어는 모두 비동기식이므로 데이터가 트랜잭션 또는 실행Sql 호출에서 반환되지 않습니다. 결과는 성공 콜백에 전달됩니다.
4a단계. 테이블에서 데이터 렌더링
테이블에서 데이터를 가져온 후에는 loadTodoItems 메서드가 호출됩니다.
onSuccess 콜백은 두 개의 매개변수를 사용합니다. 첫 번째는 쿼리의 트랜잭션이고 두 번째는 결과 집합입니다. 데이터를 반복하는 것은 매우 간단합니다.
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>" + row.todo +
" [<a href='javascript:void(0);' onclick=\'html5rocks.webdb.deleteTodo(" +
row.ID +");\'>Delete</a>]</li>";
}
이 메서드를 호출하면 할 일 목록이 'todoItems'라는 DOM 요소로 렌더링됩니다.
5단계: 테이블에서 데이터 삭제
html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
6단계: 모두 연결하기
페이지가 로드되면 데이터베이스를 열고 테이블을 만들고 (필요한 경우) 이미 데이터베이스에 있을 수 있는 todo 항목을 렌더링합니다.
....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>
<body onload="init();">
DOM에서 데이터를 가져오는 함수가 필요하므로 HTML5rocks.webdb.addTodo 메서드를
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}