[HTML5] Web SQL Database : 웹 SQL 데이터베이스

[HTML5] Web SQL Database : 웹 SQL 데이터베이스

Web SQL Database를 적용한 브라우저에서는 자유롭게 데이터베이스를 작성하거나 이용할 수 있습니다.
(일단은 중지.. 삭제될 예정이라는 소문도..)

SQL을 이용한 유연한 데이터베이스 엑세스는 매우 큰 강점입니다.

일반적으로 웹 애플리케이션이 서버와 직접 통신을 하며 데이터를 저장한다면,
웹 SQL 데이터베이스를 이용하면, 로컬 데이터베이스에 우선 저장해두고, 나중에 서버와 통신해 동기화 할 수 있습니다.
이런 점을 이용해 오프라인 웹 애플리케이션에서도 사용할 수 있겠지요.

어쨋든, 여기서는 Web SQL Database에서
동기 API를 이용한 Database와 비동기 API를 이용한 Database 중 비동기 API 사용에 중점을 두도록 하겠습니다.

Web SQL Database는 동기 API를 이용한 방법과 비동기 API를 이용한 방법으로 나뉩니다.

동기 API는 Web Worker(웹 워커)안에서 사용해야하는 제약이 있습니다.
비동기 API는 엑세스 처리 결과를 얻기위해 반드시 Call back method를 사용해야 해서 코드가 복잡해질 수 있습니다.

비동기 API 사용 순서

사용 순서는 아래와 같습니다.
1. 데이터베이스를 연다.
2. 트랜잭션을 시작한다.
3. 트랜잭션안에서 SQL을 실행한다.(동기API 사용과 다른점은 SQL 처리결과를 위한 콜백메소드가 필요한 것입니다.)



1. 데이터베이스를 연다.
var db = openDatabase(name, version, display db name, estimatedSize, callBack); 
// 데이터베이스 열기 var db = openDatabase("EmployeeDB", " ", "Employee Database", 1024*1024);

2. 트랜잭션을 시작한다.

db.transaction(callBack, errorCallBack, successCallBack); //첫 인자외에는 생략가능

// 트랜잭션 시작 db.transaction(function (tx) { ... });

3. 트랜잭션 안에서 SQL을 실행한다.

tx.executeSql(sql, args, callback, errorCallback); // 첫 인자외에는 생략가능

db.transaction(function (tx) { // if not exists 구문을 이용, 테이블이 없을때에만 테이블 생성 // employee_id는 자동으로 인덱싱되는 키본키 tx.executeSql("create table if not exists Employee (" + " employee_id integer primary key autoincrement," + " name, age integer)"); });



  

비동기 데이터베이스 객체가 가진 속성과 메소드

속성/메소드	설명
transaction(callback, errorCallBack, successCallBack);	트랜잭션 실행
readTransaction(callBack, errorCallBack, successCallBack);	읽기전용 트랜잭션 실행
version	데이터베이스의 현재 버전
changeVersion(old, new, callBack, errorCB, successCB);	데이터베이스의 버전 변경

SQL 실행 결과에 대한 처리

Transaction.executeSql()에 대한 실행결과는 SQLResultSet(Result Set:rs)형의 객체로 얻을 수 있습니다.

Result Set 객체의 메소드는 아래와 같습니다.

메소드	설명
insertId	insert문의 결과 자동으로 생성된 ID
rowsAffected	update, delete문으로 영향을 받은 행의 갯수
rows	select문을 실행한 결과,  배열과 비슷한 객체로 length 속성이 검색 결과의 갯수를 나타냄

아래는 예시 코드입니다. rs 객체에 대한 사용예를 볼 수 있습니다.
tx.executeSql("select * from Employee", [], function(tx, rs) { var list = document.getElementById("list"); list.innerHTML = ""; var rows = rs.rows; // Employee 테이블에 저장된 모든 값을 표시 for ( var i = 0 ; i < rows.length ; i++ ) { var row = rows.item(i); var option = new Option ( // 키 row.employee_id + "\t" + row.name + "\t (" + row.age + "세) ", // 값 row.employee_id ); list.options[list.options.length] = option; } });

데이터베이스 스키마의 버전관리

데이터베이스의 Version 속성
- openDatabase() 메소드 반환값으로 얻는 데이터베이스 객체는 현재 버전을 version 속성에 가지고 있다.
- openDatabase(name, version, displayName, estimatedSize, creationCallback);
   version을 통해 버전을 지정할 수 있다.
   지정한 버전과 다르면 데이터베이스는 열리지 않는다.
// 데이터베이스 버전이 1이 아니면 열지 않는다. var db = openDatabase("crouteDB", "1", "Croute Database", 1024 * 1024); // 데이터베이스 버전에 관계없이 데이터베이스를 연다. var db = openDatabase("crouteDB", "", "Croute Database", 1024 * 1024);

 데이터베이스 버전 바꾸기
// 버전이 정의되지 않은 DB를 1.0 버전으로 바꾼다. db.changeVersion("", "1.0"); // 버전이 정의되지 않은 DB를 1.0 버전으로 바꾼다. 추가 작업으로 새로운 테이블을 만든다. db.changeVersion("", "1.0" function(tx) { tx.executeSql("create table ….. "); }); // 버전을 1에서 2로 바꾼다. 추가적으로 칼럼을 추가한다. db.changeVersion("1", "2" function(tx) { tx.executeSql("alter table CrouteTable add column gender integer"); } // 에러처리에 대한 콜백함수 function(error) { ... } // 처리 성공시의 콜백함수는 인자를 갖지 않는다. function() { ... } );

---

예제 소스코드

웹 SQL Database 코드(HTML5&API입문 Chap.13)  web_sql_database_async.html