-
280920 Web SQL DatabaseJavaScript 2020. 9. 28. 16:59
1. 변수 선언
var html5db; html5db.webdb = {};변수를 선언하고 그 안에 webdb를 생성
2. 데이터 베이스 열기
html5db.webdb.db = null; html5db.webdb.open = function(){ var DBsize = 5 * 1024 * 1024; //5MB html5db.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize); }db의 초기값 설정하고,
열었을 경우에 함수 실행 → DBsize 설정
openDatabase 에 필요한 parameters : 이름, 버전, 설명, 크기
html5db.webdb.onError = function(tx, e) { alert("There has been an error: " + e.message); } html5db.webdb.onSuccess = function(tx, r) { }에러 상황 시에 나타낼 함수 설정,
정상 작동 시에 나타낼 함수 설정.
3. 테이블 생성
html5db.webdb.createTable = function(){ html5db.webdb.db.transaction(function(tx){ tx.executeSql('CREATE TABLE IF NOT EXIST' + 'todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)', []); }); }코드 자체는 SQL에서 쓰는 것 처럼 대문자로 명령어를 입력하는 듯 해,
그리고 너무 길어서 보기 편하게 나눈 후, +로 붙였는데 사실상
executeSql의 parameter는
para1 : 'CREATE TABLE IF NOT EXIST todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)
para2 : []
4. 테이블에 데이터 추가
html5db.webdb.addTodo = function(todoText){ html5db.webdb.db.transaction(function(tx){ tx.executeSql('INSERT INTO todo(todo, added_on) VALUES(?,?)', [todoText, addedOn], html5db.webdb.onSuccess, html5db.webdb.onError); }); };executeSql이 가지는 parameters가 조금 복잡하다.
para1 : 'INSERT INTO todo(todo, added_on) VALUES(?,?)'
para2 : [todoText, addedOn]
para3 : html5db.webdb.onSuccess
para4 : html5db.webdb.onError
5. 테이블의 데이터 선택
html5db.webdb.getAllTodoItems = function(renderFunc){ html5db.webdb.db.transaction(function(tx){ tx.executeSql('SELECT * FROM todo', [], renderFunc, html5db.webdb.onError); }); }데이터는 반드시 callback을 통해 전달된다.
6. 불러온 데이터 처리
function loadTodoItems(tx, ts){ var rowOutput = ""; for (i = 0; i < rs.rows.lenght; 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>'; }loadTodoItems 함수 호출,
7. 테이블의 데이터 제거
html5db.webdb.deleteTodo = function(id){ html5db.webdb.db.transaction(function(tx){ tx.executeSql('DELETE FROM todo WHERE ID=?', [id], loadTodoItems, html5db.webdb.onError); }); }
8. 초기화 및 HTML 구성
<script> function init() { html5db.webdb.open(); html5db.webdb.createTable(); html5db.webdb.getAllTodoItems(loadTodoItems); } function addTodo() { var todo = document.getElementById('todo'); html5db.webdb.addTodo(todo.value); todo.value = ''; } </script> <body onload="init();"> <form type="post" onsubmit="addTodo(); return false;"> <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;"> <input type="submit" value="Add Todo Item"> </form> </body>'JavaScript' 카테고리의 다른 글
051020 JavaScript 정리 (0) 2020.10.05 051020 JavaScript 회원가입 (2) 2020.10.05 280920 #JavaScript Exercises (0) 2020.09.28 240920 #003 BOM / DOM (0) 2020.09.24 230920 #002 상속 / 내장함수 및 객체 (1) 2020.09.23