HTML5 를 이용한 클라이언트 사이드 데이타베이스 저장소 이용하기

HTML5 표준스펙에 따르면 사용자 PC에 로컬 데이타베이스를 사용할 수 있는 기능을 사용할 수 있다고 한다.
일명 Web SQL Database라고 하는 이 기능을 이용하면 SQLlite와 같이 SQL문으로 사용자 PC에 데이타베이스를 만들어 다양한 응용을 가능하게 만들었다. 기존에는 쿠키등과 같은 단편적인 자료만 저장이 가능했다는 것을 감안한다면 매우 혁신적인 접근방법이 아닌가 생각한다.

아래 링크는 이 기능을 이용해 일종의 포스트잇과 같은 기능을 수행할 수 있도록 만들어졌다. 정상적인 동작모습을 보기 위해서는 Webkit엔진을 채용한 오페라나 Chrome에서 봐야한다.

Demo보기 : http://webkit.org/demos/sticky-notes/index.html

포스트잇을 생성하고 글을 쓰고 난 다음에 다시 위 주소로 접속해보자. 기존의 포스트잇의 위치와 그 내용이 그대로 있다는 것을 확인할 수 있을 것이다. 삭제시에 보여지는 효과는 CSS3에서 제공하는 기능이다. 그 부분도 눈여겨보자.

Javascript와 CSS에 대한 감각이 있는 개발자라면 위에서 보여주는 페이지의 소스를 분석하는데 그리 어려움을 가지지 않을 것이다. 다음은 소스이다.

sticky-notes.zip

관련글
WebKit Does HTML5 Client-side DataBase Storage
Web SQL DataBase  

글쓴이 : 지돌스타(http://html5.jidolstar.com)