HTML5 웹 SQL
웹 SQL 데이터베이스 API는 HTML5 사양의 일부는 아니지만 SQL을 사용하여 클라이언트 데이터베이스를 운영하기 위한 API 집합을 도입하는 독립적인 사양입니다.
웹 백엔드 프로그래머라면 SQL 연산을 이해하기 쉬워야 합니다.
또한 SQL 튜토리얼을 참조하여 데이터베이스 작업에 대해 자세히 알아볼 수도 있습니다.
Web SQL 데이터베이스는 최신 버전의 Safari, Chrome 및 Opera 브라우저에서 작동합니다.
핵심 메서드
다음은 사양에 정의된 세 가지 핵심 메서드입니다.
openDatabase: 메소드 기존 데이터베이스 또는 새 데이터베이스를 사용하여 데이터베이스 개체를 만듭니다.
트랜잭션: 이 방법을 사용하면 트랜잭션을 제어하고 이러한 상황에 따라 커밋 또는 롤백을 수행할 수 있습니다.
executeSql: 실제 SQL 쿼리를 실행하는 데 사용되는 메서드입니다.
데이터베이스 열기
openDatabase() 메소드를 사용하여 기존 데이터베이스를 열 수 있습니다. 데이터베이스가 존재하지 않으면 새 데이터베이스가 생성됩니다. 사용 코드는 다음과 같습니다.
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);openDatabase() 메소드에 해당하는 5개의 매개변수에 대한 설명:
데이터베이스 이름
버전 번호
설명 텍스트
데이터베이스 크기
콜백 생성
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 테이블이 있습니다.
데이터 삽입
위의 create table 문을 실행한 후 일부 데이터를 삽입할 수 있습니다.
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, "php中文网")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
});동적 값을 사용하여 데이터를 삽입할 수도 있습니다.
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는 외부 변수이며, ExecutionSql은 배열 매개변수의 각 항목을 "?"에 매핑합니다.
데이터 읽기
다음 예에서는 데이터베이스에 이미 존재하는 데이터를 읽는 방법을 보여줍니다.
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, "php中文网")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
});
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);
});전체 예
인스턴스
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
<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('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>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
기록 삭제
기록을 삭제하는 데 사용되는 형식은 다음과 같습니다.
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});지정된 데이터 ID를 삭제하는 것은 동적일 수도 있습니다.
db.transaction(function(tx) {
tx.executeSql('DELETE FROM LOGS WHERE 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">
<title>php中文网(php.cn)</title>
<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=1');
msg = '<p>删除 id 为 1 的记录。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'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>인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하면 온라인 인스턴스
