HTML 5 웹 SQL 데이터베이스 코어 트라이던트

저자：Eve Cole 업데이트 시간：2025-03-29 22:32:02

Web SQL 데이터베이스 API는 실제로 HTML 5 사양에 포함되지 않습니다. 클라이언트 데이터베이스를 작동시키기 위해 SQL을 사용하는 API 세트를 도입하는 독립적 인 사양입니다. 귀하가 훌륭한 웹 개발자라고 가정하면 SQL 및 데이터베이스와 관련된 개념에 이미 익숙하다는 것은 의심의 여지가 없습니다. SQL에 익숙하지 않으면 계속 읽으십시오. 이 기사 전에 먼저 SQL 관련 튜토리얼을 배우는 것이 가장 좋습니다.

Chrome, Safari 및 Opera의 최신 버전은 모두 Web SQL 데이터베이스를 지원합니다.

핵심 방법

이 기사는 사양에 정의 된 세 가지 핵심 방법을 소개합니다.

1. OpenDatabase :이 메소드는 기존 데이터베이스를 사용하거나 새 데이터베이스를 작성하여 데이터베이스 개체를 만듭니다.

2. 거래 :이 방법을 사용하면 상황에 따라 거래 커밋 또는 롤백을 제어 할 수 있습니다.

3. ExecutesQL :이 메소드는 실제 SQL 쿼리를 실행하는 데 사용됩니다.

데이터베이스를 엽니 다

OpenDatabase 메소드는 기존 데이터베이스를 엽니 다. 데이터베이스가 존재하지 않으면 데이터베이스를 만들 수도 있습니다. 데이터베이스 생성 및 열기를위한 구문은 다음과 같습니다.

 vardb = opendatabase ( 'mydb', '1.0', 'testdb', 2*1024*1024);

위의 OpenDatabase 방법은 다음 5 가지 매개 변수를 사용합니다.

1. 데이터베이스 이름 (MyDB)

2. 버전 번호 (1.0)

3. 설명 (테스트 DB)

4. 데이터베이스 크기 (2*1024*1024)

5. 콜백을 만듭니다

마지막으로 다섯 번째 매개 변수는 데이터베이스를 만들 때 호출되는 콜백을 생성하지만이 매개 변수가 없어도 런타임에 데이터베이스를 생성 할 수 있습니다.

쿼리를 실행하십시오

데이터베이스를 사용하여 쿼리를 실행합니다. transaction () 함수는 하나의 매개 변수 만 필요하며 다음은 실제 쿼리 문입니다.

 vardb = opendatabase ( 'mydb', '1.0', 'testdb', 2*1024*1024);
 db.Transaction (function (tx) {
 tx.executesql ( 'createTableIfnoteXistSlogs (idunique, log)');
 });

위의 쿼리는 MyDB 데이터베이스에서 로그 테이블을 만듭니다.

작동을 삽입하십시오

새 레코드를 테이블에 삽입하기 위해 위의 쿼리 문에 간단한 SQL 쿼리를 추가했으며 수정 된 문은 다음과 같습니다.

 vardb = opendatabase ( 'mydb', '1.0', 'testdb', 2*1024*1024);
 db.Transaction (function (tx) {
 tx.executesql ( 'createTableIfnoteXistSlogs (idunique, log)');
 tx.executesql ( 'insertIntologs (id, log) 값 (1, foobar)');
 tx.executesql ( 'insertIntologs (id, log) 값 (2, logmsg)');
 });

새 레코드를 삽입 할 때는 다음과 같은 동적 값을 전달할 수도 있습니다.

 vardb = opendatabase ( 'mydb', '1.0', 'testdb', 2*1024*1024);
 db.Transaction (function (tx) {
 tx.executesql ( 'createTableIfnoteXistSlogs (idunique, log)');
 tx.executesql ( 'insertIntologs
 (id, log) 값 (?,? '), [e_id, e_log];
 });

여기에서 e_id 및 e_log는 외부 변수이며 각 항목에 ql 맵을 실행합니까? 배열 매개 변수에서.

작업을 읽으십시오

이미 존재하는 레코드를 읽으려면 콜백을 사용하여 결과를 캡처합니다. 코드는 다음과 같습니다.

 vardb = opendatabase ( 'mydb', '1.0', 'testdb', 2*1024*1024);
 db.Transaction (function (tx) {
 tx.executesql ( 'createTableIfnoteXistSlogs (idunique, log)');
 tx.executesql ( 'insertIntologs (id, log) 값 (1, foobar)');
 tx.executesql ( 'insertIntologs (id, log) 값 (2, logmsg)');
 });
 db.Transaction (function (tx) {
 tx.executesql ( 'select*fromlogs', [], function (tx, results) {
 varlen = results.rows.length, i;
 msg = <p> foundrows :+len+</p>;
 document.querySelector ( '#status'). innerHtml+= msg;
 for (i = 0; i <len; i ++) {
 alert (results.rows.item (i) .log);
 }
 }, null);
 });

완전한 예

마지막으로, 우리는 브라우저를 사용하여 HTML 5 문서를 구문 분석하면서 이전에 설명 된 내용을 제시합니다.

 <! doctypehtml>
 <html>
 <헤드>
 <scriptType = text/javaScript>
 vardb = opendatabase ( 'mydb', '1.0', 'testdb', 2*1024*1024);
 varmsg;
 db.Transaction (function (tx) {
 tx.executesql ( 'createTableIfnoteXistSlogs (idunique, log)');
 tx.executesql ( 'insertIntologs (id, log) 값 (1, foobar)');
 tx.executesql ( 'insertIntologs (id, log) 값 (2, logmsg)');
 msg = '<p> logmessagecreatedand rowinserted. </p>';
 document.querySelector ( '#status'). innerHtml = msg;
 });
 db.Transaction (function (tx) {
 tx.executesql ( 'select*fromlogs', [], function (tx, results) {
 varlen = results.rows.length, i;
 msg = <p> foundrows :+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);
 });
 </스크립트>
 </head>
 <body>
 <divid = statusName = status> statusMessage </div>
 </body>
 </html>

다음은 최신 버전의 Safari 또는 Opera 브라우저에서 생성 된 출력 결과입니다.

 logmessagecreatedandrowinserted.
 Foundrows : 2
 foobar
 logmsg