webSql Sample

Programming/html

by luckey 2010. 7. 1. 15:20

webSql 사용법에 대해서 알아본다.

사용법은 일반 SQL사용하는 것과 비슷하다. 아래와 같이 3개의 함수가 제공된다.
1. openDatabase : DataBase를 열때 사용하는것 같으나 실제로 사용해보면 저장할 공간을 만든다는 것이 맞을 것 같다.
2. transaction : openDatabase를 통해서 생성된 Database와 통신을 한다.(데이터를 넣거나 가져온다.)
3. executeSql : 각종(insert, select, create...) 명령문이 실행되는 부분

<!DOCTYPE html>
<html>
<title>webSql 테스트</title>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var db;
function setDB()
{
if(window.openDatabase){
//openDatabase('데이터베이스이름', '버전번호', '주석?', '사용할 DataBase크기')
db = openDatabase('tweets', '1.0', 'db of tweets', 2 * 1024 * 1024);
//DataBase를 만들고 사용할 수 있도록 준비한다.
}
else
{
  alert("webDataBase를 사용할 수 없는 브라우져 입니다.");
  return false;
} //http://html5demos.com/database-rollback 예제 참고
db.transaction(function(tx){
  tx.executeSql('DROP table if exists foo'); //기존 테이블을 지우고
  tx.executeSql('create table foo(id unique, text)'); //새로운 테이블을 만든다.
  tx.executeSql('insert into foo(id, text) values(1, "test1")'); //자료를 넣는다.
  tx.executeSql('insert into foo(id, text) values(2, "test2")');
  tx.executeSql('insert into foo(id, text) values(3, "test3")');
});
getDB();
}
function getDB()
{
db.transaction(function(tx){
  tx.executeSql('select * from foo', [], function(tx,results){ //쿼리문을 날려서 데이터를 가져온다.
   if(results.rows && results.rows.length)
   {
    for(var i = 0; i < results.rows.length; i++)
    {
     var oRow = document.all.tableBody.insertRow();
     var oCell1 = oRow.insertCell();
     var oCell2 = oRow.insertCell();
     oCell1.style.backgroundColor='blue';
     oCell1.innerHTML = results.rows.item(i).text;
     oCell2.innerHTML = results.rows.item(i).id;
    }
   }
  });
});
}
setDB();
</script>
</head>
<body>

//위의 코드가 실행되고 나면 이와 같이 Database, table이 생성되고 자료가 들어가있는 것을 확인할 수 있다.

//데이터 출력하기

<table cellpadding="0" cellspacing="0" border="0">
<colgroup>
    <col width="100" />
    <col width="100" />
</colgroup>
<thead>
    <tr>
        <td align="center">id</td>
        <td align="center">text</td>
    </tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>