1. 개��

1.1. 브라��
1.2. Indexed Database

2. ��

3. ��법

3.1. 변��

3.5.1. 결과 ��

3.6. 데�� 기

3.7. hooking it all up

3.7.1. init
3.7.2. adding

3.8. transaction

4. ��고

1. 개�� ¶

SeeAlso) html5/web-storage
로�� 부. html5/web-storage�� 가 ��공되는 것.
브라�� 경량 DB
web storage�� 교
- WebStorage는 ��단�� 데��를 ��기 ��.
- WebSqlDatabase는 보다 구��고 ��된 관�� 데�� 베��를 대량��로 ��
�� 경량 관�� 료구�� , �� SQL��
SQLite를 기반��로 ��고 ��다.

1.1. 브라�� ¶

��로 �� 는다.
- �� 내부 디��가 sqlite �� 구��고.

��래�� 드를 ��면 �� 부를 �� 다.

if(!!window.openDatabase) {
     alert("������ 브라������는 Web SQL Database를 �����������다")
}
else{
      alert("������ 브라������는 Web SQL Database를 ������������ ��������다")
}

1.2. Indexed Database ¶

SeeAlso) html5/indexedDatabase
Indexed Database는 ��로 �� 또다른 로�� 다
2009�� 말까�� 던 Web SQL Database �� 대��로 ��다
�� Web SQL Database 는 �� 된 ��며, IndexedDB 라는 ��로��

대��로 떠��르고 ��다

2. �� ¶

��동기 �� 므로 UI�� 다.
��메�� 단��로 DB가 ��리된다.
- �� 메�� 된 디��는 다른 ��메�� 근�� 다.
��반�� DB ��법과 ��다. ��고, ��고, 닫고.

3. ��법 ¶

��동기 ��다.
transaction�� 다.
- transaction(), readTransaction

3.1. 변�� ¶

var html5rocks = {};
html5rocks.webdb = {};

3.2. ��기 ¶

�� 반드�� 데�� 베��를 �� 다.

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);
}

3.3. ��블 �� ¶

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)', []);
  });
}

3.4. ��블�� 데�� 가 ¶

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);
    });
}

3.5. 검�� ¶

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

3.5.1. 결과 �� ¶

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>';
}

3.6. 데�� 기 ¶

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

3.7. hooking it all up ¶

3.7.1. init ¶

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

<body onload="init();">

3.7.2. adding ¶

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

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

3.8. 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")');
});

4. ��고 ¶

html5/web Sql Database

Contents

1. 개�� ¶

1.1. 브라�� ¶

1.2. Indexed Database ¶

2. �� ¶

3. ��법 ¶

3.1. 변�� ¶

3.2. ��기 ¶

3.3. ��블 �� ¶

3.4. ��블�� 데�� 가 ¶

3.5. 검�� ¶

3.5.1. 결과 �� ¶

3.6. 데�� 기 ¶

3.7. hooking it all up ¶

3.7.1. init ¶

3.7.2. adding ¶

3.8. transaction ¶

4. ��고 ¶

html5/web Sql Database

Contents

1. 개��� ¶

1.1. 브라������ ������ ¶

1.2. Indexed Database ¶

2. ������ ¶

3. ������법 ¶

3.1. 변��� ������ ¶

3.2. ���기 ¶

3.3. ������블 ������ ¶

3.4. ������블��� 데������ ���가 ¶

3.5. 검��� ������ ¶

3.5.1. 결과 ������ ¶

3.6. 데������ ������기 ¶

3.7. hooking it all up ¶

3.7.1. init ¶

3.7.2. adding ¶

3.8. transaction ¶

4. ���고 ¶

1. 개�� ¶

1.1. 브라�� ¶

2. �� ¶

3. ��법 ¶

3.1. 변�� ¶

3.2. ��기 ¶

3.3. ��블 �� ¶

3.4. ��블�� 데�� 가 ¶

3.5. 검�� ¶

3.5.1. 결과 �� ¶

3.6. 데�� 기 ¶

4. ��고 ¶