Revision as of 10:13, 11 October 2010

[[pagelist(html5)]]

개요

로컬 저장소의 일부. html5/webStorage외에 추가 제공되는 것.
브라우저 자체 경량 DB
web storage와 비교
- WebStorage는 간단한 데이터를 저장하기 적합.
- WebSqlDatabase는 보다 구조적이고 체계화된 관계혀 데이터 베이스를 대량으로 저장
안정적인 경량 관계형 자료구조 지원, 표준 SQL질의 지원

*SQLite를 기반으로 하고 있다.

브라우저 지원

의외로 파이폭스에서 지원하지 않는다.
- 심지어 내부 디비가 sqlite 임에도 불구하고.
아래의 코드를 이용하면 지원 여부를 확인 할 수 있다.

if(!!window.openDatabase) {
     alert("현재 브라우저는 Web SQL Database를 지원합니다")
}
else{
      alert("현재 브라우저는 Web SQL Database를 지원하지 않습니다")
}

Indexed Database

SeeAlso) html5/indexedDatabase
Indexed Database는 새로 등장한 또다른 로컬 저장소 스펙이다
2009년 말까지 사양 책정이 진행중이던 Web SQL Database 의 대안으로 탄생했다
현재 Web SQL Database 는 사양 책정이 중지된 상태이며, IndexedDB 라는 새로운 스펙이

대안으로 떠오르고 있다

특징

비동기 작업 이므로 UI에 최소한의 영향을 준다.
도메인 단위로 DB가 분리된다.
- 특정 도메인에서 생성된 디비는 다른 도메인에서 접근할 수 없다.
일반적인 DB 사용법과 비슷하다. 열고, 수행하고, 닫고.

사용법

비동기 식이다.
transaction을 지원한다.

transaction()

, {{{readTransaction}}}

변수 선언

var html5rocks = {};
html5rocks.webdb = {};
}}
== 열기 ==
 * 사용전에 반드시 데이터 베이스를 열어야 한다.
{{{
html5rocks.webdb.db = null;

html5rocks.webdb.open = function() {
  var dbSize = 5 * 1024 * 1024; // 5MB
  html5rocks.webdb.db = openDatabase('Todo', '1.0', 'todo manager', dbSize);
}

html5rocks.webdb.onError = function(tx, e) {
  alert('Something unexpected happened: ' + e.message );
}

html5rocks.webdb.onSuccess = function(tx, r) {
  // re-render all the data
  html5rocks.webdb.getAllTodoItems(tx, r);
}

테이블 생성

todo table. ID, todo, added_on
html5rocks.webdb.createTable = function() {
  html5rocks.webdb.db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS ' + 
                  'todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)', []);
  });
}

테이블에 데이터 추가

dynamic sql

html5rocks.webdb.addTodo = function(todoText) {
  html5rocks.webdb.db.transaction(function(tx){
    var addedOn = new Date();
    tx.executeSql('INSERT INTO todo(todo, added_on) VALUES (?,?)', 
        [todoText, addedOn],
        html5rocks.webdb.onSuccess,
        html5rocks.webdb.onError);
    });
}

검색 질의

html5rocks.webdb.getAllTodoItems = function(renderFunc) {
  html5rocks.webdb.db.transaction(function(tx) {
    tx.executeSql('SELECT * FROM todo', [], renderFunc, 
        html5rocks.webdb.onError);
  });
}

= 결과 표시

function loadTodoItems(tx, rs) {
  var rowOutput = "";
  for (var i=0; i < rs.rows.length; i++) {
    rowOutput += renderTodo(rs.rows.item(i));
  }
  var todoItems = document.getElementById('todoItems');
  todoItems.innerHTML = rowOutput;
}

function renderTodo(row) {
  return '<li>' + row.ID  +
         '[<a onclick="html5rocks.webdb.deleteTodo(' + row.ID + ');"'>X</a>]</li>';
}

데이터 지우기

html5rocks.webdb.deleteTodo = function(id) {
  html5rocks.webdb.db.transaction(function(tx) {
    tx.executeSql('DELETE FROM todo WHERE ID=?', [id],
        loadTodoItems, html5rocks.webdb.onError);
  });
}

hooking it all up

init

function init() {
  html5rocks.webdb.open();
  html5rocks.webdb.createTable();
  html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>

<body onload="init();">

adding

function addTodo() {
  var todo = document.getElementById('todo');

  html5rocks.webdb.addTodo(todo.value);
  todo.value = ;
}

transaction

var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024);
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');
});

Html5/webSqlDatabase: Difference between revisions

Revision as of 10:13, 11 October 2010

개요

브라우저 지원

Indexed Database

특징

사용법

변수 선언

테이블 생성

테이블에 데이터 추가

검색 질의

= 결과 표시

데이터 지우기

hooking it all up

init

adding

transaction

참고

@@ Line 9: / Line 9: @@
 * 안정적인 경량 관계형 자료구조 지원, 표준 SQL질의 지원
   *SQLite를 기반으로 하고 있다.
+== 브라우저 지원 ==
+* 의외로 파이폭스에서 지원하지 않는다.
+** '''심지어 내부 디비가 sqlite 임에도 불구하고.'''
+* 아래의 코드를 이용하면 지원 여부를 확인 할 수 있다.
+ if(!!window.openDatabase) {
+      alert("현재 브라우저는 Web SQL Database를 지원합니다")
+ }
+ else{
+       alert("현재 브라우저는 Web SQL Database를 지원하지 않습니다")
+ }
+== Indexed Database ==
+* SeeAlso) [[html5/indexedDatabase]]
+* Indexed Database는 새로 등장한 또다른 로컬 저장소 스펙이다
+* 2009년 말까지 사양 책정이 진행중이던 Web SQL Database 의 대안으로 탄생했다
+* 현재 Web SQL Database 는 사양 책정이 중지된 상태이며, IndexedDB 라는 새로운 스펙이
+대안으로 떠오르고 있다
+= 특징 =
+* 비동기 작업 이므로 UI에 최소한의 영향을 준다.
+* 도메인 단위로 DB가 분리된다.
+** 특정 도메인에서 생성된 디비는 다른 도메인에서 접근할 수 없다.
+* 일반적인 DB 사용법과 비슷하다. 열고, 수행하고, 닫고.
+= 사용법 =
+* 비동기 식이다.
+* transaction을 지원한다.
+**
+ transaction()
+, {{{readTransaction}}}
+== 변수 선언 ==
+ var html5rocks = {};
+ html5rocks.webdb = {};
+ }}
+ == 열기 ==
+  * 사용전에 반드시 데이터 베이스를 열어야 한다.
+ {{{
+ html5rocks.webdb.db = null;
+ html5rocks.webdb.open = function() {
+   var dbSize = 5 * 1024 * 1024; // 5MB
+   html5rocks.webdb.db = openDatabase('Todo', '1.0', 'todo manager', dbSize);
+ }
+ html5rocks.webdb.onError = function(tx, e) {
+   alert('Something unexpected happened: ' + e.message );
+ }
+ html5rocks.webdb.onSuccess = function(tx, r) {
+   // re-render all the data
+   html5rocks.webdb.getAllTodoItems(tx, r);
+ }
+== 테이블 생성 ==
+*
+ todo table. ID, todo, added_on
+ html5rocks.webdb.createTable = function() {
+   html5rocks.webdb.db.transaction(function(tx) {
+     tx.executeSql('CREATE TABLE IF NOT EXISTS ' +
+                   'todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)', []);
+   });
+ }
+== 테이블에 데이터 추가 ==
+* dynamic sql
+ html5rocks.webdb.addTodo = function(todoText) {
+   html5rocks.webdb.db.transaction(function(tx){
+     var addedOn = new Date();
+     tx.executeSql('INSERT INTO todo(todo, added_on) VALUES (?,?)',
+         [todoText, addedOn],
+         html5rocks.webdb.onSuccess,
+         html5rocks.webdb.onError);
+     });
+ }
+== 검색 질의 ==
+*
+ html5rocks.webdb.getAllTodoItems = function(renderFunc) {
+   html5rocks.webdb.db.transaction(function(tx) {
+     tx.executeSql('SELECT * FROM todo', [], renderFunc,
+         html5rocks.webdb.onError);
+   });
+ }
+=== 결과 표시 ==
+ function loadTodoItems(tx, rs) {
+   var rowOutput = "";
+   for (var i=0; i &lt; rs.rows.length; i++) {
+     rowOutput += renderTodo(rs.rows.item(i));
+   }
+   var todoItems = document.getElementById('todoItems');
+   todoItems.innerHTML = rowOutput;
+ }
+ function renderTodo(row) {
+   return '&lt;li&gt;' + row.ID  +
+          '[&lt;a onclick="html5rocks.webdb.deleteTodo(' + row.ID + ');"'&gt;X&lt;/a&gt;]&lt;/li&gt;';
+ }
+== 데이터 지우기 ==
+ html5rocks.webdb.deleteTodo = function(id) {
+   html5rocks.webdb.db.transaction(function(tx) {
+     tx.executeSql('DELETE FROM todo WHERE ID=?', [id],
+         loadTodoItems, html5rocks.webdb.onError);
+   });
+ }
+== hooking it all up ==
+=== init ===
+ function init() {
+   html5rocks.webdb.open();
+   html5rocks.webdb.createTable();
+   html5rocks.webdb.getAllTodoItems(loadTodoItems);
+ }
+ &lt;/script&gt;
+ &lt;body onload="init();"&gt;
+=== adding ===
+ function addTodo() {
+   var todo = document.getElementById('todo');
+   html5rocks.webdb.addTodo(todo.value);
+   todo.value = '';
+ }
+== transaction ==
+ var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024);
+ db.transaction(function (tx) {
+   tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
+   tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');
+ });
 = 참고 =
 * http://m.mkexdev.net/61
@@ Line 14: / Line 138: @@
 * http://html5doctor.com/introducing-web-sql-databases/
 * http://dev.w3.org/html5/webdatabase/
-* http://html5.jidolstar.com/tag/web%20sql%20database
+* http://html5.jidolstar.com/tag/web%20sql%20databaseo