HTML5 웹 SQL 데이터베이스

웹 SQL 데이터베이스 API는 HTML5 사양의 일부는 아니지만 SQL을 사용하여 클라이언트 데이터베이스를 운영하기 위한 API 집합을 도입하는 독립적인 사양입니다.

당신이 훌륭한 웹 개발자라고 가정한다면, 당신은 SQL과 RDBMS 개념을 잘 알고 있을 것입니다. 여전히 SQL 주제가 필요한 경우 SQL 튜토리얼을 확인하세요.

최신 버전의 Safari, Chrome, Opera에서 웹 SQL 데이터베이스를 사용할 수 있습니다.

핵심 메소드

명세서에 정의된 핵심 메소드 3개는 다음과 같습니다. 이 튜토리얼에서도 다룹니다:

openDatabase: 이 메소드는 기존 데이터베이스 또는 새 데이터베이스를 사용하여 데이터베이스 객체를 생성합니다.

트랜잭션: 이 방법을 사용하면 트랜잭션을 제어하고 이러한 상황에 따라 커밋 또는 롤백을 수행할 수 있습니다.

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 고유, 로그)');
});

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

삽입 작업

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

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(' 존재하지 않는 경우 테이블 생성 로그(id 고유, 로그)');
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)');
});

여기의 e_id 및 e_log는 외부입니다. 변수를 사용하면 ExecutionSql은 배열 매개변수의 각 항목을 "?"로 매핑합니다. 읽기 작업

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

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

db.transaction(function (tx) {

tx.executeSql('CREATE TABLE IF 존재하지 않는 로그(ID 고유, 로그)');

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>발견된 행: " + 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>

최신 버전의 Safari 또는 Opera 브라우저에서는 다음과 같은 결과가 생성됩니다.

로그 메시지가 생성되고 행이 삽입되었습니다.

찾은 행 : 2

foobar

logmsg

기록 삭제

기록 삭제에 사용되는 형식은 다음과 같습니다.

db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});

지정된 데이터 ID 삭제는 동적일 수도 있습니다.

db.transaction (함수 (tx) {
tx.executeSql('ID=?', [id]);
});

업데이트 기록

업데이트 기록에 사용되는 형식은 다음과 같습니다.

db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log ='www.w3cschool .cc' WHERE id=2');
});

지정된 데이터 ID 업데이트는 동적일 수도 있습니다.

db.transaction( function(tx) {
tx.executeSql('UPDATE LOGS SET log='www.w3cschool.cc' WHERE id=?', [id]);
});

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <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, "php中文网")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")'); msg = '<p>数据表已创建，且插入了两条数据。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=3'); msg = '<p>删除 id 为 3 的记录。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'www.php.cn\' WHERE id=2'); msg = '<p>更新 id 为 2 的记录。</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>查询记录条数: " + 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">状态信息</div> </body> </html>

제출하다 코드 재설정

자동운전