- html5
- html5/VA
- html5/canvas
- html5/drag-and-drop
- html5/form
- html5/geolocation
- html5/offline-web-application
- html5/others-api
- html5/outline
- html5/overview
- html5/richtext-edit
- html5/video&audio
- html5/web-storage
- html5/web-workers
- html5/webSqlDatabase
- html5/websocket
- html5/๋ฌธ์ ์
- html5practice/roundRect
- html5practice/์ฆ๊ฒจ์ฐพ๊ธฐ๋ชฉ๋ก๋ง๋ค๊ธฐ
1. ๊ฐ์ ¶
- SeeAlso) html5/web-storage
- ๋ก์ปฌ ์ ์ฅ์์ ์ผ๋ถ. html5/web-storage์ธ์ ์ถ๊ฐ ์ ๊ณต๋๋ ๊ฒ.
- ๋ธ๋ผ์ฐ์ ์์ฒด ๊ฒฝ๋ DB
- web storage์ ๋น๊ต
- ์์ ์ ์ธ ๊ฒฝ๋ ๊ด๊ณํ ์๋ฃ๊ตฌ์กฐ ์ง์, ํ์ค SQL์ง์ ์ง์
- SQLite๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๊ณ ์๋ค.
1.1. ๋ธ๋ผ์ฐ์ ์ง์ ¶
- ์์ธ๋ก ํ์ด์ดํญ์ค์์ ์ง์ํ์ง ์๋๋ค.
- ์ฌ์ง์ด ๋ด๋ถ ๋๋น๊ฐ sqlite ์์๋ ๋ถ๊ตฌํ๊ณ .
- ์ฌ์ง์ด ๋ด๋ถ ๋๋น๊ฐ 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.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.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 = ''; }