HTML5-웹 SQL 데이터베이스

웹 SQL 데이터베이스 API는 실제로 HTML5 사양의 일부가 아니지만 SQL을 사용하여 클라이언트 측 데이터베이스를 조작하기위한 API 집합을 도입하는 별도의 사양입니다.

나는 당신이 훌륭한 웹 개발자라고 가정하고 그것이 사실이라면 의심의 여지없이 SQL 및 RDBMS 개념을 잘 알고있을 것입니다. 여전히 SQL 세션을 갖고 싶다면 SQL Tutorial을 참조하십시오 .

웹 SQL 데이터베이스는 최신 버전의 Safari, Chrome 및 Opera에서 작동합니다.

핵심 방법

이 튜토리얼에서 다룰 스펙에 정의 된 세 가지 핵심 방법이 있습니다.

openDatabase −이 방법은 기존 데이터베이스를 사용하거나 새 데이터베이스를 생성하여 데이터베이스 개체를 생성합니다.
transaction −이 방법은 트랜잭션을 제어하고 상황에 따라 커밋 또는 롤백을 수행 할 수있는 기능을 제공합니다.
executeSql −이 방법은 실제 SQL 쿼리를 실행하는 데 사용됩니다.

데이터베이스 열기

를 OpenDatabase의 방법은 존재하지 않는 경우는 이미이 방법을 만듭니다 존재하는 경우 데이터베이스를 여는 처리합니다.

데이터베이스를 생성하고 열려면 다음 코드를 사용하십시오.

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

위의 방법은 다음과 같은 5 개의 매개 변수를 취했습니다.

데이터베이스 이름
버전 번호
텍스트 설명
데이터베이스 크기
생성 콜백

마지막 및 다섯 번째 인수 인 생성 콜백은 데이터베이스가 생성되는 경우 호출됩니다. 그러나이 기능이 없어도 데이터베이스는 여전히 즉석에서 생성되고 올바르게 버전이 지정됩니다.

쿼리 실행

쿼리를 실행하려면 database.transaction () 함수를 사용합니다. 이 함수에는 다음과 같이 실제로 쿼리를 실행하는 함수 인 단일 인수가 필요합니다.

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

위 쿼리는 'mydb'데이터베이스에 LOGS라는 테이블을 생성합니다.

INSERT 작업

테이블에 Enteries를 생성하기 위해 위의 예에서 다음과 같이 간단한 SQL 쿼리를 추가합니다.

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

다음과 같이 입력을 생성하면서 동적 값을 전달할 수 있습니다.

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; 
});

여기 e_id 과 e_log 외부 변수이고 executeSql은 배열 인수의 각 항목을 "?"에 매핑합니다.

읽기 작업

이미 존재하는 레코드를 읽기 위해 콜백을 사용하여 다음과 같이 결과를 캡처합니다.

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
      var len = results.rows.length, i; 
      msg = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

최종 예

마지막으로이 예제를 다음과 같이 본격적인 HTML5 문서에 보관하고 Safari 브라우저로 실행 해 봅니다.

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
         var msg; 
    
         db.transaction(function (tx) { 
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</p>'; 
            document.querySelector('#status').innerHTML =  msg; 
         })

         db.transaction(function (tx) { 
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
               var len = results.rows.length, i; 
               msg = "<p>Found rows: " + len + "</p>"; 
               document.querySelector('#status').innerHTML +=  msg; 
      
               for (i = 0; i < len; i++) { 
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; 
                  document.querySelector('#status').innerHTML +=  msg; 
               } 
            }, null); 
         }); 
      </script> 
   </head> 
  
   <body> 
      <div id = "status" name = "status">Status Message</div> 
   </body> 
</html>

이것은 다음 결과를 생성합니다-