HTML5-Tutorial. Lokale HTML-5-Datenbank (Web-SQL-Datenbank)

HTML5-Tutorial zur lokalen HTML5-Datenbank (Web-SQL-Datenbank)

Die Web-SQL-Datenbanken von HTML5 (lokale HTML5-Datenbank) sind in der Tat sehr verlockend, wenn Sie feststellen, dass Sie für den Betrieb dieselbe Abfrageanweisung wie die MySQL-Abfrage verwenden können Lokale Datenbank, Sie werden feststellen, dass diese Sache sehr interessant ist. Heute lernen wir die Web-SQL-Datenbank-API von HTML 5 kennen: openDatabase, Transaction, ExecuteSql.

Die Web SQL-Datenbank-API ist eigentlich nicht Teil der HTML5-Spezifikation, sondern eine separate Spezifikation. Es manipuliert die Datenbank des Clients über eine Reihe von APIs. Mainstream-Browser wie Safari, Chrome, Firefox und Opera unterstützen bereits Web SQL-Datenbank. Die Web-SQL-Datenbanken von HTML5 sind in der Tat sehr verlockend. Wenn Sie feststellen, dass Sie dieselbe Abfrageanweisung wie eine MySQL-Abfrage verwenden können, um eine lokale Datenbank zu betreiben, werden Sie diese Sache sehr interessant finden. Erfahren Sie heute mehr über die Web SQL-Datenbank-API von HTML 5.

Im Folgenden wird nacheinander erläutert, wie Sie eine Datenbank erstellen und öffnen, eine Tabelle erstellen, Daten hinzufügen, Daten aktualisieren, Daten löschen und eine Tabelle löschen.

Stellen Sie zunächst drei Kernmethoden vor

1. openDatabase: Diese Methode erstellt ein Datenbankobjekt unter Verwendung einer vorhandenen Datenbank oder erstellt eine neue Datenbank.

2. Transaktion: Mit dieser Methode können wir die Übermittlung oder das Rollback von Transaktionen je nach Situation steuern.

3.executeSql: Diese Methode wird verwendet, um echte SQL-Abfragen auszuführen.

Schritt 1: Verbindung öffnen und Datenbank erstellen

Der Code lautet wie folgt:

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
if (!dataBase) {
alert("数据库创建失败！");
} else {
alert("数据库创建成功！");
}

Erklären Sie die openDatabase-Methode Um eine vorhandene Datenbank zu öffnen, kann die Datenbank auch erstellt werden, wenn sie nicht vorhanden ist. Die Bedeutung mehrerer Parameter ist:
1, Datenbankname.
2. Die Versionsnummer ist derzeit 1.0. Lassen Sie es einfach zu Tode.
3. Beschreibung der Datenbank.
4. Stellen Sie die Datengröße ein.
5, Rückruffunktion (kann weggelassen werden).
Erstellen Sie beim ersten Anruf die Datenbank und stellen Sie dann die Verbindung her.
Die erstellte Datenbank existiert lokal und der Pfad lautet wie folgt:
C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultdatabaseshttp_localhost_4987.
Was erstellt wird, ist eine SQLite-Datenbank. Sie können SQLiteSpy verwenden, um die Datei zu öffnen und die darin enthaltenen Daten anzuzeigen. SQLiteSpy ist eine umweltfreundliche Software. Sie können sie von Baidu oder der offiziellen SQLiteSpy-Downloadadresse herunterladen: SQLiteSpy.


Schritt 2: Erstellen Sie eine Datentabelle

Der Code lautet wie folgt:

this.createTable=function() {
dataBase.transaction( function(tx) { 
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)", 
[], 
function(tx,result){ alert('创建stu表成功'); }, 
function(tx, error){ alert('创建stu表失败:' + error.message); 
});
});
}

Erläutern it,
Die FunktionexecuteSql hat vier Parameter, ihre Bedeutung ist:
1) Stellt die Abfragezeichenfolge dar und die verwendete SQL-Sprache ist SQLite 3.6.19.
2) Die in die Abfrage eingefügten Zeichenfolgendaten an der Stelle, an der sich das Fragezeichen befindet.
3) Callback-Funktion wird bei Erfolg ausgeführt. Gibt zwei Parameter zurück: tx und das Ergebnis der Ausführung.
4) Eine Rückruffunktion, die ausgeführt wird, wenn ein Fehler auftritt. Gibt zwei Parameter zurück: tx und Fehlermeldung.



Schritt 3: Hinzufügen, Löschen, Ändern und Überprüfen durchführen

1) Daten hinzufügen:

Code wie folgt:

this.insert = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[id, '徐明祥'],
function () { alert('添加数据成功'); },
function (tx, error) { alert('添加数据失败: ' + error.message); 
} );
});

2) Abfragedaten

Der Code lautet wie folgt:

this.query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //执行成功的回调函数
//在这里对result 做你想要做的事情吧...........
},
function (tx, error) {
alert('查询失败: ' + error.message);
} );
});
}

Erklären Sie es
Die Rückruffunktion, die im obigen Code erfolgreich ausgeführt wird, hat einen Parameter result.

Ergebnis: Der abgefragte Datensatz. Sein Datentyp ist SQLResultSet, genau wie DataTable in C#.
SQLResultSet ist definiert als:

Der Code lautet wie folgt:

interface SQLResultSet {
readonly attribute long insertId;
readonly attribute long rowsAffected;
readonly attribute SQLResultSetRowList rows;
};

Das wichtigste Attribut – Zeilen vom Typ SQLResultSetRowList ist data Die „Zeile“ der Menge.
Zeilen haben zwei Attribute: Länge und Element.
Ermitteln Sie also den Wert einer bestimmten Zeile und Spalte des Abfrageergebnisses: result.rows[i].item[fieldname].

3) Daten aktualisieren

Der Code lautet wie folgt:

this.update = function (id, name) {
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? where id= ?",
[name, id],
function (tx, result) {
},
function (tx, error) {
alert('更新失败: ' + error.message);
});
});
}

4) Daten löschen

Der Code lautet wie folgt:

this.del = function (id) {
dataBase.transaction(function (tx) {
tx.executeSql(
"delete from stu where id= ?",
[id],
function (tx, result) {
},
function (tx, error) {
alert('删除失败: ' + error.message);
});
});
}

5) Löschen Sie die Datentabelle

Der Code lautet wie folgt:

this.dropTable = function () {
dataBase.transaction(function (tx) {
tx.executeSql('drop table stu');
});
}