ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 280920 Web SQL Database
    JavaScript 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

    댓글

Designed by Tistory.