본문 바로가기

web/HTML

HTML5 webDB 예제

저번 포스팅에서는 local Storage에 대하여 간략하게 예제를 해보았습니다.

local Storage의 장점은 사용하기 간편하다는것이지만 단점은 해쉬형태로 저장되기 때문에 일괄의 데이터(객체형태)를 다루기에는 무리가 있습니다. 이점을 보안하기 위하여 webDB가 있습니다. 실제 DB사용과 매우 유사하며 저장,삭제,변경 또한 간편합니다.


-파이어폭스 브라우저에서는 webDB를 현재 지원하지 않습니다. 아래의 내용은 크롬에서 실행한 결과입니다.

- IE는 당연히 안됩니다.(IE10에서도 안된다고 하던데... 확인 부탁드립니다.)


참고 싸이트는 요기 : http://www.html5rocks.com/en/tutorials/webdatabase/todo/


소스 코드


참고링크에는 없던 update와 drop을 추가하였습니다.  소스는 상당히 쉬운편입니다.(예제이다 보니)

저의 예제는 todo테이블을 살짝 변형시켰습니다. text하나 추가하였습니다.


1. update는 input text 두개의 칸에 value값을 넣어주고 update를 눌러주면 해당 row가 input 값에 따라 update

   됩니다. 

   아래 화면과 같이 input 텍스트칸에 데이터를 넣고 변경하려는 row의 update버튼을 눌러줍니다.

  아래와 같이 update됩니다.(3번째에 udpate했습니다.)

 



2. drop의 경우엔 sql 구문에서 truncate가 먹히지 않아서 drop으로 처리했으며, 테이블 drop 후 init()함수를 통하

   여 다시 테이블을 생성하도록 했습니다.

 

  delete all Item 버튼을 눌러주면 테이블이 drop됩니다.


크롬의 요소검사->resources->Databases 에서 테이블을 확인하시면 테이블 데이터가 없는것을 볼수 있습니다.



3. 나머지 select, insert, delete 구문은 어떻게 돌아가는지 실행해보시면 쉽게 아실수 있을겁니다.