HTML5-Tutorial. HTML 5 lokale Datenbank (Web-SQL-Datenbank)_HTML5-Tutorial-Fähigkeiten

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 verwendet eine vorhandene Datenbank oder erstellt eine neue Datenbank, um ein Datenbankobjekt zu erstellen.

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

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

Schritt 1: Verbindung öffnen und Datenbank erstellen

Code kopieren

Der Code lautet wie folgt:

var dataBase = openDatabase("student", "1.0", "Student Table", 1024 * 1024, function () { });
if ( !dataBase) {
Alert("Datenbankerstellung fehlgeschlagen!");
} else {
Alert("Datenbank erfolgreich erstellt!");
}

Erklären Sie es: Die openDatabase-Methode öffnet eine vorhandene Datenbank und kann auch eine Datenbank erstellen, wenn diese nicht vorhanden ist. Die Bedeutung mehrerer Parameter ist:
1, Datenbankname.
2. Die Versionsnummer ist derzeit 1.0. Lass es in Ruhe und schreibe 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: Datentabelle erstellen

Code kopieren

Der Code lautet wie folgt:

this.createTable=function() {
dataBase.transaction( function(tx) {
tx.executeSql(
"Tabelle erstellen, wenn nicht existiert stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alarm('Stu table Creating Successful'); },
function(tx, error){ warning( 'Failed to create stu table:' error.message);
});
});
}

Explain,
executeSql function 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: Prüfung auf Hinzufügung, Löschung und Änderung durchführen

1) Daten hinzufügen:

Code kopieren

Der Code lautet wie folgt:

this.insert = function () {
dataBase.transaction(function ( tx) {
tx.executeSql(
"insert into stu (id, name) Values(?, ?)",
[id, 'Xu Mingxiang'],
function () { Alert ('Daten erfolgreich hinzugefügt'); },
function (tx, error) { Alert('Fehler beim Hinzufügen von Daten: '
} );
});

2) Daten abfragen

Code kopieren

Der Code lautet wie folgt:

this .query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { / /Callback-Funktion für erfolgreiche Ausführung
//Machen Sie hier mit dem Ergebnis, was Sie tun möchten.....
},
function (tx, error) {
Alert('Query failed: ' error.message);
} );
});
}

Erklären Sie es
Die erfolgreich ausgeführte Rückruffunktion im obigen Code hat einen Parameter result.

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

Code kopieren

Der Code lautet wie folgt:

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

Das wichtigste Attribut – Zeilen von Der Typ SQLResultSetRowList ist die „Zeile“ des Datensatzes.
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

Code kopieren

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) {
warning('Update failed: ' error.message );
});
});
}

4) Daten löschen

Code kopieren

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 , Fehler) {
Alert('Löschen fehlgeschlagen: ' error.message);
});
});
}

5) Datentabelle löschen

Code kopieren

Der Code lautet wie folgt:

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

Web-SQL-Datenbank hinzugefügt. Löschen und ändern Sie die Demo, zum Herunterladen klicken.