English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 기본 가이드

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML 5 로컬 데이터베이스

HTML5의 Web SQL Database(html5 로컬 데이터베이스는 매우 유혹적입니다. MySQL과 같은 쿼리 문장을 사용하여 로컬 데이터베이스를操作할 수 있다면, 이는 매우 흥미롭습니다. 오늘, 우리는 HTML 5의 Web SQL Database API: openDatabase, transaction, executeSql.

HTML5 Web SQL 데이터베이스

WebSQL은 프론트엔드의 독립 모듈로, 웹 저장 방식의 하나로, 디버깅할 때 자주 볼 수 있지만 일반적으로 많이 사용되지 않습니다。

Web 백엔드 프로그래머라면 SQL 작업을 이해하기가 쉬울 것입니다。

Web SQL 데이터베이스는 최신 버전의 Safari, Chrome, Opera 브라우저에서 작동합니다。

핵심 메서드

규격에서 정의된 세 가지 핵심 메서드는 다음과 같습니다：

  • openDatabase: 이 메서드는 기존 데이터베이스를 사용하거나 새로운 데이터베이스를 생성하여 데이터베이스 객체를 생성합니다。

  • transaction: 이 메서드는 일련의 작업을 제어하고, 이 상황에 따라 커밋이나 롤백을 수행할 수 있게 합니다。

  • executeSql: 이 메서드는 실제 SQL 쿼리를 실행하는 데 사용됩니다。

데이터베이스 열기

openDatabase() 메서드를 사용하여 기존 데이터베이스를 열거나, 데이터베이스가 존재하지 않으면 새로운 데이터베이스를 생성할 수 있습니다. 다음과 같은 코드를 사용합니다：

var db = openDatabase(#39;testdb#39;#39;1.0#39;#39;Test WebDB#39;,　2　*　1024　*　1024);

openDatabase() 메서드의 다섯 가지 매개변수 설명：

  • 데이터베이스 이름

  • 버전 번호

  • 설명 텍스트

  • 데이터베이스 크기

  • 생성回调

다섯 번째 매개변수는 데이터베이스가 생성된 후에 생성回调이 호출됩니다。

조회 작업 수행

database.transaction() 함수를 사용하여 작업을 수행합니다：

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 지침 웹사이트(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#39;1.0#39;#39;Test WebDB#39;,　2　*　1024　*　1024);
db.transaction(function(tx) {　　
　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
});
</script>
</body>
</html>

위의 문장이 실행된 후는 & #39;testdb#39; 데이터베이스에 LOGS라는 테이블을 생성합니다。

데이터 삽입

위의 테이블 생성 문장을 실행한 후, 일부 데이터를 삽입할 수 있습니다：

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 지침 웹사이트(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#39;1.0#39;#39;Test WebDB#39;,　2　*　1024　*　1024);
db.transaction(function(tx) {
　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "기본 지침 웹사이트)#39;);
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "ko.oldtoolbag.com)#39;);
});
</script>
</body>
</html>

데이터를 삽입하는 데도 동적으로 값을 사용할 수 있습니다：

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 지침 웹사이트(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#39;1.0#39;#39;Test WebDB#39;,　2　*　1024　*　1024);
db.transaction(function(tx) {　　
　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
　　tx.executeSql(#39;INSERT INTO LOGS (id,log) VALUES (?, ?)#39;[e_id, e_log]);
});
</script>
</body>
</html>

예제에서 e_id와 e_log은 외부 변수이며 executeSql은 배열 파라미터의 각 항목을 "?"에 매핑합니다。

데이터를 읽기

다음 예제는 데이터베이스에 이미 존재하는 데이터를 읽는 방법을 보여줍니다：

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 지침 웹사이트(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#39;1.0#39;#39;Test WebDB#39;,　2　*　1024　*　1024);
　
db.transaction(function(tx) {
　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "기본 지침 웹사이트)#39;);
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "ko.oldtoolbag.com)#39;);
});
　
db.transaction(function(tx) {
　　　tx.executeSql(#39;SELECT　*　FROM LOGS39, [], function(tx, results) {
　　　　　　var len = results.rows.length, i;
　　　　　　msg = "<p>조회 기록 수: "　+　len　+　"</p>"
　　　　　　document.querySelector(&39;#status&39).innerHTML;　+= msg;
　　　　
　　　　　　for (i = 0; i < len; i++{
　　　　　　　　　alert(results.rows.item(i).log);
　　　　　　}
　　　　
　　　}, null);
});
</script>
</body>
</html>

완전 예제

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 지침 웹사이트(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#39;1.0#39;#39;Test WebDB#39;,　2　*　1024　*　1024);
var msg;
　
db.transaction(function(tx) {
　　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "기본 지침 웹사이트)#39;);
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "ko.oldtoolbag.com)#39;);
　　　　msg = #39;<p>데이터 테이블이 생성되었으며 두 개의 데이터가 삽입되었습니다.</p>#39;;
　　　　document.querySelector(&39;#status&39;).innerHTML = msg;
});
　
db.transaction(function(tx) {
tx.executeSql(#39;SELECT　*　FROM LOGS39, [], function(tx, results) {
　　　　var len = results.rows.length, i;
　　　　msg = "<p>조회 기록 수: "　+　len　+　"</p>"
　　　　document.querySelector(&39;#status&39).innerHTML;　+= msg;
　
　　　　for (i = 0; i < len; i++{
　　　　　　　　msg = "<p><b>"　+　results.rows.item(i).log　+　"</b></p>"
　　　　　　　　document.querySelector(&39;#status&39).innerHTML;　+= msg;
　　　　}
}, null);
});
</script>
<div id="status" name="status">상태 정보</div>
</body>
</html>
테스트해 보세요 ‹/›

위의 예제 실행 결과는 다음 그림과 같습니다:

데이터를 지우기

데이터를 지우는 형식은 다음과 같습니다：

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

지정된 데이터 id를 지우는 것도 동적으로 할 수 있습니다：

db.transaction(function(tx) {
　　　　tx.executeSql(#39;DELETE FROM LOGS WHERE id=?#39;[id]);
});

데이터를 업데이트

데이터를 업데이트하는 형식은 다음과 같습니다：

db.transaction(function(tx) {
　　　　tx.executeSql(#39;UPDATE LOGS SET log=#39;ko.oldtoolbag.com\#39;WHERE id=2#39;);
});

지정된 데이터 id를 업데이트하는 것도 동적으로 할 수 있습니다：

db.transaction(function(tx) {
　　　　tx.executeSql(#39;UPDATE LOGS SET log=#39;ko.oldtoolbag.com\#39;WHERE id=?#39;[id]);
});

완전 예제

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 지침 웹사이트(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#39;1.0#39;#39;Test WebDB#39;,　2　*　1024　*　1024);
var msg;
　
　db.transaction(function(tx) {
　　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "기본 지침 웹사이트)#39;);
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "ko.oldtoolbag.com)#39;);
　　　　msg = #39;<p>데이터 테이블이 생성되었으며 두 개의 데이터가 삽입되었습니다.</p>#39;;
　　　　document.querySelector(&39;#status&39;).innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　　　tx.executeSql(#39;DELETE FROM LOGS WHERE id=1#39;);
　　　　　　msg = #39;<p>id를 지우는　1　의 기록.</p>#39;;
　　　　　　document.querySelector(&39;#status&39;).innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　　tx.executeSql(#39;UPDATE LOGS SET log=#39;ko.oldtoolbag.com\#39;WHERE id=2#39;);
　　　　　　msg = #39;<p>id를 업데이트할　2　의 기록.</p>#39;;
　　　　　　document.querySelector(&39;#status&39;).innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　tx.executeSql(#39;SELECT　*　FROM LOGS39, [], function(tx, results) {
　　　　　　　var len = results.rows.length, i;
　　　　　　　msg = "<p>조회 기록 수: "　+　len　+　"</p>"
　　　　　　　document.querySelector(&39;#status&39).innerHTML;　+= msg;
　　　　　　　
　　　　　　　for (i = 0; i < len; i++{
　　　　　　　　　　msg = "<p><b>"　+　results.rows.item(i).log　+　"</b></p>"
　　　　　　　　　　document.querySelector(&39;#status&39).innerHTML;　+= msg;
　　　　　　　}
　　　　}, null);
　});
</script>
<div id="status" name="status">상태 정보</div>
</body>
</html>
테스트해 보세요 ‹/›

위의 예제 실행 결과는 다음 그림과 같습니다:

HTML5 애플리케이션 캐시HTML5 클라이언트 스토리지