HTML5 Storage 2 - Web SQL DB -

Hi! This is the second tutorial of HTML5.
I am going to show you Web SQL DB of HTML5.

오늘 볼 기능은 Web SQL DB 입니다.
예전엔 PHP, ASP, JSP 같은 서버 사이드 스크립트 언어로 디비서버에 연결해서 테이블에 자료를 저장하고 불러오고 수정하고 했었습니다.
물론 HTML5에서도 그 기능이 가능한데요.
거기에다가 브라우저 내에도 테이블을 만들어서 SQL 쿼리로 테이블을 만들고 저장하고 지우고 할 수 있습니다.
물론 이 Data 는  Client side 의 Browser 에 저장이 됩니다.
Client side 에서 이 Browser 를 껐다 켜도, 그리고 컴퓨터를 껐다 켜도 그 데이터는 브라우저내에 그대로 있습니다. (서버에 있는 것이 아닙니다.)

이 기능을 살펴 보겠습니다.

- This function is not working on this blog so download below source code file and open the file with your browser (Google Chrome,Opera or Safari)
이 기능은 이 블로그에서는 실행이 안 되네요.
아래 업로드한 파일 다운 받으셔서 여러분 브라우저에서 실행해 보세요. -

JS

Web SQL Database

var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

See the generated database: Developer > Developer Tools > Storage

1. Click Create Table Button -> The table will be created
2. Type Anything in Text field and click new to do item button. (You can make data as many as you want)
3. You can delete the data. (click the line Delete)
4. You can drop the table (Click the drop table button)

1. 먼저 create Table Button을 click 하셔서 table을 생성합니다. (Table1Test 테이블이 생성될 겁니다.)
2. text field 에 원하는 글자를 넣고 new to do item 버튼을 누르세요. 그러면 생성된 테이블에 그 데이터가 들어갑니다. 여러분이 원하는 만큼 만드세요.
3. 만들어진 데이터는 밑에 보여지게 됩니다. 여기서 Delete 링크를 누르면 해당 데이터는 지워지게 됩니다.
4. Drop table 버튼을 누르면 이 테이블 전체가 지워지게 됩니다.

사용법은 위에 있고 전체 소스는 아래에 업로드 하겠습니다.
You can download the source code below.

HTML5WebSQLDB.html

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not Working (X)
Opera 11.60                            - Working Well (O)
Safari 5.1.2                             - Working Well (O)
FireFox 9.0.1                          - Not Working (X)

이 기능은 제가 가지고 있는 인터넷 익스플로어 하고 파이어폭스에서 작동하지 않네요.

Please let us know (Leave a comment) whether it is working on your browser (PC,Mobile) or not please.
여러분 브라우저에서 제대로 작동하는지 댓글에 달아 주시면 아주 고맙겠습니다.
모바일 브라우저에서의 동작 여부도요.

그럼...
thanks..