브라우저에 데이타베이스?
HTML5 의 로컬 저장소는 이전에 알아본 Web Storage 이외에도 관계형 데이타베이스가 추가로
제공된다. 일명 Web SQL Database 가 그것이다
(Web SQL Database 를 지원하는 브라우저는 자체적으로 경량의 관계형 DB를 내장하고 있다)
Web Storage 의 경우 비교적 적은양의 간단한 데이터를 저장하기에 적합한 로컬 저장소인 반면
Web SQL Database 는 보다 구조적이고 체계화된 관계형 데이터를 대랑으로 저장하기에 적합하다
이것은 마치 파일이라는 저장소와 MS SQL 이나 Oracle 과 같은 관계형 데이타베이스의 차이라 하겠다
물론 Web SQL Database가 Oracle 와 같이 서버급, 대용량 DBMS의 면모를 모두 갖추지는 않았지만,
안정적이고 경량의 관계형 자료구조를 지원하고 표준 SQL 질의를 통해 데이터를 보다 유연하게 다룰 수 있다는 점과 클라이언트(브라우저)에 직접 내장되어 있다는 점에서 매우 유용한 기능이라 할 수 있다
Web SQL Database 는 아이폰과 같은 모바일 환경에 많이 채용된 경량의 무료 DB엔진인 SQLite를
기반으로 하고 있다
브라우저 지원 현황
아래 표는 http://caniuse.com/ 에서 제공하는 브라우저(버전)별 Web SQL Database 지원 표이다
(데스크탑 용 브라우저 기준이다)
 |
위 표를 보면 사파리와 크롬, 오페라 브라우저는 Web SQL Database 를 지원한다
그러나 파이어폭스가 지원하지 않는것이 조금 의아하다
파이어폭스는 대부분의 HTML 5 신 기술을 채택하고 있는데 말이다
그리고 IE 9 역시 지원이 불투명하다. 조금 뒤에 그 이유를 알아 본다
참고로 아이폰의 사파리 역시 Web SQL Database를 지원한다
다음의 코드로 브라우저 지원 여부를 체크해 볼 수 있다
alert("현재 브라우저는 Web SQL Database를 지원합니다")
}
else{
alert("현재 브라우저는 Web SQL Database를 지원하지 않습니다")
}
Indexed Database
Indexed Database는 새로 등장한 또다른 로컬 저장소 스펙이다
2009년 말까지 사양 책정이 진행중이던 Web SQL Database 의 대안으로 탄생했다
즉 현재 Web SQL Database 는 사양 책정이 중지된 상태이며, IndexedDB 라는 새로운 스펙이
대안으로 떠오르고 있는 것이다
Indexed Database 는 자바스크립트 객체 단위의 데이터 저장이 용이하고 그 객체를 대상으로
인덱스를 걸 수 있어 간단한 구현과 효율적인 검색을 수행할 수 있다
관계형 데이타베이스의 경우 저장되는 데이터의 스키마의 유연성이 떨어질 수 있고 SQL 이라는 별도의 독립된 언어를 기반으로 하기 때문에 브라우저간 표준화및 호환성에 문제될 소지가 있다
(MS SQL과 오라클이 자체 비표준 SQL을 지원하는 것처럼 변형된 SQL이 발생할 수 있다는 것이다)
반면 Indexed Database 는 SQL 언어와는 무관하며 단순한 저장구조(Key-Value Storage)를 갖추고 있으며 간단한 자바스크립트 API 만으로도 데이터베이스 조작이 가능하여 보다 브라우저 친화적이고 표준화 작업을 쉽게 이끌 수 있다는 장점이 있다
결국 고가용성 환경이 아닌, 모바일 환경에서의 가벼운 로컬DB 컨셉은 관계형DB보다는
Indexed Database와 같은 객체기반의 비관계형 DB가 더 어울린다고 할 수 있겠다
앞서 파이어폭스와 IE9 브라우저가 Web SQL Database 를 지원하지 않는다고 하였는데,
그 이유가 바로 이들 브라우저에서는 Indexed Database 를 지원하는 것으로 방향을 잡았기 때문이다
데모 만들어 보기
Indexed Database 가 Web SQL Database 의 대안으로 그 사양 책정이 진행중이지만
Web SQL Database 역시 아직은 유효하고 효과적인 로컬 DB 이다
아이폰 및 데스크탑의 사파리 및 크롬에서 이를 지원하고 있기 때문에 무용지물은 아니다
간단한 데모를 만들어 봄으로써 사용법을 숙지하도록 하자
아래와 같이 코드를 작성하는 간략히 설명하자면,
myDB 라는 데이타베이스를 생성(오픈)하고 Test 라는 테이블을 만든다
Test 테이블에 id,name 이라는 두개의 컬럼을 가지도록 한다
이후 Test 테이블에 값을 저장하고 전체를 조회하는 데모이다
<html>
<head>
<script type="text/JavaScript">
var db;
function createDB(){
db = window.openDatabase("myDB","1.0", "테스트용DB", 1024*1024);
}
function createTable(){
db.transaction(function(tx){
tx.executeSql("create table Test(id,name)");
});
}
function insertData(){
db.transaction(function(tx){
tx.executeSql("insert into Test values(?,?)",[txtID.value,txtName.value]);
});
}
function selectData(){
db.transaction(function(tx){
tx.executeSql("select * from Test",[],
function(tx,result){
for(var i = 0; i < result.rows.length; i++){
var row = result.rows.item(i);
document.getElementById('table1').innerHTML += "<tr><td>" + row['id'] + "</td><td>" + row['name'] + "</td></tr>";
}
});
});
}
</script>
</head>
<body>
<button onclick="createDB()">DB 생성</button>
<br>
<button onclick="createTable()">테이블생성</button>
<br>
ID: <input type="text" id="txtID"> , NAME: <input type="text" id="txtName">
<button onclick="insertData()">데이터 입력</button>
<br>
<button onclick="selectData()">데이타 조회</button>
<br>
<table id="table1"></table>
</body>
</html>
데모 실행 화면
구글 크롬 브라우저에서 데모를 실행한 모습이다
개발자 도구를 통해 로컬 DB의 정보를 확인 할 수 있다
기존에 MS SQL과 같은 DBMS와 연동해 본 경험이 있다면,
Web SQL Database의 API는 매우 친근하다는 것을 느낄 것이다
표준 SQL 질의가 그대로 적용되며 몇 가지 특징적 요소가 다를 뿐이다
DB 용량과 관련해서는 브라우저마다 설정이 다르므로 주의할 부분이다
또한 기존 생성한 테이블 스카마 변경 및 버전관리 부분은 관련 API를 찾아보도록 하자
그리고 Web SQL Database 는 기본적으로 비동기로 작업이 이루어진다
데이타베이스 관련 작업이 백그라운드에서 이루어지므로 UI에 영향을 최소화 한다
동기 API 구현방법도 스펙에 포함되어 있지만 현재 브라우저마다 지원여부가 다르며
굳이 동기형태의 구현이 필요해 보이지도 않는다. 관련 자료를 참고하도록 하자
마지막으로 Web SQL Database 역시 Web Storage 와 같이 도메인(사이트) 단위로 DB가 분리된다
즉 특정 도메인에서 생성한 DB는 다른 도메인에서는 접근할 수 없다는 것이다
참고>
http://www.html5rocks.com/tutorials/webdatabase/todo/
'모바일 > HTML5' 카테고리의 다른 글
| [HTML5] Video & Audio (43) | 2010.08.24 |
|---|---|
| [HTML5] Canvas (12) | 2010.08.19 |
| [HTML5] 오프라인 웹 어플리케이션 (7) | 2010.08.12 |
| [HTML5] Web Storage (8) | 2010.08.11 |
| [HTML5] 드래그 앤 드롭 (Drag & Drop) (9) | 2010.08.10 |
