반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

HTML5 Storage 2 - Web SQL DB -

2012. 1. 9. 11:05 | Posted by 솔웅


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)
이 기능은 이 블로그에서는 실행이 안 되네요.
아래 업로드한 파일 다운 받으셔서 여러분 브라우저에서 실행해 보세요. -


HTML5 Presentation
JS

Web SQL Database

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.

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..


반응형

Comment

  1. 달빛그림자 2012.01.11 22:22

    파폭(9.0.1)에서 모든 오류가

    db.transaction(function(tx) {

    를 가리키네요..;ㅅ;

    • 너구리 2012.01.12 01:26

      FireFox 9.0.1 - Not Working (X)
      파폭에선 동작이 안된다고 하셨네요~^^

  2. 예 FireFox 9.0.1 에서 작동이 안됩니다.
    db.transaction(function(tx){ 에서 에러메세지가 체크되는지는 몰랐네요.
    좋은 정보 감사합니다.
    ^^

  3. 고라파덕 2012.02.01 03:57

    아, 저밑에 html파일 받아서 해야 정상 구동하는군요.
    크롬에서는 되는데. 역시 IE는 안 되네요.
    역시 HTML5라고는 캔버스만 지원하는 IE...
    물론, IE버젼이 제가 8이라는 점에서 당연히 안 되는거네요.
    IE는 9인가 10부터 HTML5지원하는거 같던데...

    • 솔웅 2012.02.01 06:25 신고

      예 이 글의 기능은 이 블로그내에서 작동은 안 하구요 샘플 파일을 받아서 실행해 보시면 됩니다.

      감사합니다.

  4. fantasyls 2012.02.01 04:00

    좋은글 담아가겠습니다!+_+