HTML5 Grund教程

HTML5 API

HTML5 Medien

HTML5 Grafik

HTML5 Anwendungscache HTML5 Client-Speicher

HTML 5 lokale Datenbank

HTML5der Web SQL Database (html5 Die Möglichkeit, lokale Datenbanken zu haben, ist wirklich verlockend. Wenn Sie entdecken, dass Sie lokale Datenbanken mit den gleichen Abfrageanweisungen wie MySQL betreiben können, finden Sie dies ziemlich interessant. Heute werden wir gemeinsam HTML 5der Web SQL Database API: openDatabase, transaction, executeSql.

HTML5 Web SQL Datenbank

WebSQL ist ein unabhängiges Modul am Frontend und eine Art von Web-Speicher, den wir während der Debugging-Phase oft sehen, aber normalerweise selten verwenden.

Wenn Sie ein Web-Backend-Programmierer sind, sollten Sie die Operationen von SQL leicht verstehen.

Web SQL Datenbank funktioniert in der neuesten Version von Safari, Chrome und Opera.

Kernmethoden

Hier sind die drei Kernmethoden, die in der Norm definiert sind:

openDatabase: Diese Methode verwendet eine bestehende Datenbank oder erstellt eine neue Datenbank, um ein Datenbankobjekt zu erstellen.
transaction: Diese Methode ermöglicht es uns, eine Transaktion zu steuern und basierend auf diesem Fall einen Commit oder Rollback auszuführen.
executeSql: Diese Methode wird verwendet, um tatsächliche SQL-Abfragen auszuführen.

Datenbank öffnen

Wir können die Methode openDatabase() verwenden, um eine bestehende Datenbank zu öffnen. Wenn die Datenbank nicht existiert, wird eine neue Datenbank erstellt. Der folgende Code zeigt dies:

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

Die fünf Parameter der openDatabase() -Methode sind wie folgt beschrieben:

Name der Datenbank
Versionsnummer
Beschreibungstext
Größe der Datenbank
Erstellung Callback

Der fünfte Parameter, der Callback wird nach der Erstellung der Datenbank aufgerufen.

Die Abfrageoperation ausführen

Die Operation wird mit der Funktion database.transaction() ausgeführt:

示例

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb', '1.0', 'Test WebDB',　2　*　1024　*　1024);
db.transaction(function(tx) {　　
　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
</script>
</body>
</html>

Nachdem der obige Befehl ausgeführt wurde, wird in den 'testdb' Ein Table mit dem Namen LOGS wird in der Datenbank erstellt.

Daten einfügen

Nachdem die obige Erstellungstabelle ausgeführt wurde, können wir einige Daten einfügen:

示例

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb', '1.0', 'Test WebDB',　2　*　1024　*　1024);
db.transaction(function(tx) {
　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "基础教程网")');
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "de.oldtoolbag.com")');
});
</script>
</body>
</html>

我们也可以使用动态值来插入数据：

示例

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb', '1.0', 'Test WebDB',　2　*　1024　*　1024);
db.transaction(function(tx) {　　
　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　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', '1.0', 'Test WebDB',　2　*　1024　*　1024);
　
db.transaction(function(tx) {
　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "基础教程网")');
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "de.oldtoolbag.com")');
});
　
db.transaction(function(tx) {
　　　tx.executeSql(#39;SELECT　*　FROM LOGS39; [], function(tx, results) {
　　　　　　var len = results.rows.length, i
　　　　　　msg = "<p>Anzahl der Abfragezeilen: "　+　len　+　"</p>";
　　　　　　document.querySelector('#status').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', '1.0', 'Test WebDB',　2　*　1024　*　1024);
var msg;
　
db.transaction(function(tx) {
　　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "基础教程网")');
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "de.oldtoolbag.com")');
　　　　msg = '<p>数据表已创建，且插入了两条数据。</p>';
　　　　document.querySelector('#status').innerHTML = msg;
});
　
db.transaction(function(tx) {
tx.executeSql(#39;SELECT　*　FROM LOGS39; [], function(tx, results) {
　　　　var len = results.rows.length, i
　　　　msg = "<p>Anzahl der Abfragezeilen: "　+　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>
<div id="status" name="status">Statusinformation</div>
</body>
</html>

Testen Sie es heraus ‹/›

Die Ergebnisse der folgenden Beispiele sind wie folgt dargestellt:

删除记录

删除记录使用的格式如下：

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

删除指定的数据id也可以是动态的：

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

更新记录

更新记录使用的格式如下：

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

更新指定的数据id也可以是动态的：

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

完整示例

示例

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb', '1.0', 'Test WebDB',　2　*　1024　*　1024);
var msg;
　
　db.transaction(function(tx) {
　　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "基础教程网")');
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "de.oldtoolbag.com")');
　　　　msg = '<p>数据表已创建，且插入了两条数据。</p>';
　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　　　tx.executeSql(#39;DELETE FROM LOGS WHERE id=1');
　　　　　　msg = '<p>删除 id 为　1　的记录。</p>';
　　　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　　tx.executeSql(#39;UPDATE LOGS SET log=\'de.oldtoolbag.com\'WHERE id=2');
　　　　　　msg = '<p>更新 id 为　2　的记录。</p>';
　　　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　tx.executeSql(#39;SELECT　*　FROM LOGS39; [], function(tx, results) {
　　　　　　　var len = results.rows.length, i
　　　　　　　msg = "<p>Anzahl der Abfragezeilen: "　+　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>
<div id="status" name="status">Statusinformation</div>
</body>
</html>

Testen Sie es heraus ‹/›

Die Ergebnisse der folgenden Beispiele sind wie folgt dargestellt:

HTML5 Anwendungscache HTML5 Client-Speicher