HTML5 웹 SQL 데이터베이스
웹 SQL 데이터베이스 API는 HTML5 스펙의 일부는 아니지만, 별도의 규격이다 SQL 동작 클라이언트 데이터베이스를 사용 API 집합을 도입했다.
만약 웹 프로그래머 후단 경우, SQL 동작을 쉽게 이해할 수 있어야한다.
당신은 또한 우리를 참조 할 수 있습니다 SQL 자습서 더 많은 지식 데이터베이스 작업을 배울 수 있습니다.
웹 SQL 데이터베이스는 사파리, 크롬과 오페라 브라우저의 최신 버전으로 작업 할 수 있습니다.
핵심 방법
다음은 본 명세서에서 정의 된 세 가지 핵심 방법이다 :
- 수 OpenDatabase :이 방법은 기존의 데이터베이스를 사용하거나 새 데이터베이스 오브젝트 데이터베이스를 만듭니다.
- 트랜잭션 (transaction) :이 방법은 우리가 트랜잭션을 제어 할 수 있습니다,이 경우에 커밋 또는 롤백을 기반으로.
- executeSql :이 방법은 실제 SQL 쿼리를 수행하는 데 사용됩니다.
데이터베이스 열기
데이터베이스가 존재하지 않는 경우 우리는 다음과 같은 코드를 사용, 새 데이터베이스를 만들고, 기존의 데이터베이스를 열 수 OpenDatabase () 메서드를 사용할 수 있습니다 :
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
수 OpenDatabase ()의 설명에 해당하는 다섯 가지 파라미터있어서
- 데이터베이스 이름
- 버전 번호
- 설명 텍스트
- 데이터베이스 크기
- 콜백 만들기
다섯 번째 매개 변수는 콜백이 데이터베이스를 생성 한 후 호출됩니다 만들 수 있습니다.
쿼리 작업을 수행하려면
실행은 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'데이터베이스에서 테이블라는 로그를 생성합니다.
데이터를 삽입
테이블을 만들려면 위의 문을 실행 한 후, 우리는 일부 데이터를 삽입 할 수 있습니다 :
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, "本教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
});
우리는 또한 데이터를 삽입하는 동적 값을 사용할 수 있습니다 :
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_log 외부 변수, executeSql 배열 매개 변수의 각 항목에 매핑 E_ID "?."
데이터 읽기
다음의 예는 이미 데이터베이스에 데이터를 판독하는 방법을 보여
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, "本教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
});
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>
<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, "本教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
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">
<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, "本教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
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=\'www.w3cschool.cc\' 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>
위의 운영 결과의 예는 다음과 같이 :
