HTML 5 Web SQL Database Core Trident

Autor：Eve Cole Aktualisierungszeit：2025-03-29 22:32:02

Die Web SQL -Datenbank -API von Web SQL ist in der HTML 5 -Spezifikation nicht enthalten. Es ist eine unabhängige Spezifikation, die eine Reihe von APIs einführt, die SQL zum Betrieb von Client -Datenbanken verwenden. Angenommen, Sie sind ein ausgezeichneter Webentwickler, es besteht kein Zweifel, dass Sie bereits mit den Konzepten im Zusammenhang mit SQL und Datenbanken vertraut sind. Wenn Sie mit SQL nicht vertraut sind, lesen Sie weiter. Vor diesem Artikel ist es am besten, zuerst SQL-bezogene Tutorials zu lernen.

Die neuesten Versionen von Chrome, Safari und Opera unterstützen alle Web -SQL -Datenbanken.

Kernmethoden

In diesem Artikel werden drei in der Spezifikation definierte Kernmethoden eingeführt:

1. Opendatabase: Diese Methode verwendet eine vorhandene Datenbank oder erstellt eine neue Datenbank, um ein Datenbankobjekt zu erstellen.

2. Transaktion: Diese Methode ermöglicht es uns, das Transaktionsausschuss oder Rollback gemäß der Situation zu steuern.

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

Öffnen Sie die Datenbank

Die Opendatabase -Methode öffnet eine vorhandene Datenbank. Wenn die Datenbank nicht vorhanden ist, kann auch eine Datenbank erstellt werden. Die Syntax zum Erstellen und Öffnen der Datenbank ist wie folgt:

 vardb = opendatabase ('mydb', '1.0', 'testDB', 2*1024*1024);

Die obige Opendatabase -Methode verwendet die folgenden fünf Parameter:

1. Datenbankname (mydb)

2. Versionsnummer (1.0)

3. Beschreibung (Test DB)

4. Datenbankgröße (2*1024*1024)

5. Erstellen Sie einen Rückruf

Der letzte, der fünfte Parameter, erstellt einen Rückruf, der beim Erstellen der Datenbank aufgerufen wird, aber auch ohne diesen Parameter kann die Datenbank zur Laufzeit erstellt werden.

Eine Frage ausführen

Führen Sie die Abfrage mit der Funktion "Datenbank.transaction () aus, für die nur ein Parameter erforderlich ist, und das Folgende ist eine reale Abfrageanweisung:

 vardb = opendatabase ('mydb', '1.0', 'testDB', 2*1024*1024);
 db.transaction (Funktion (tx) {
 tx.executesql ('createTableIfnotexistsLogs (idunique, log)');
 });

Die obige Abfrage erstellt eine Protokollentabelle in der MyDB -Datenbank.

Betrieb einlegen

Um einen neuen Datensatz in die Tabelle einzufügen, haben wir der obigen Abfrageanweisung eine einfache SQL -Abfrage hinzugefügt, und die modifizierte Anweisung lautet wie folgt:

 vardb = opendatabase ('mydb', '1.0', 'testDB', 2*1024*1024);
 db.transaction (Funktion (tx) {
 tx.executesql ('createTableIfnotexistsLogs (idunique, log)');
 tx.executesql ('InsertIntologs (ID, log) -Werte (1, foobar)');
 tx.executesql ('InsertIntologs (ID, log) -Werte (2, logMSG)');
 });

Beim Einsetzen eines neuen Datensatzes können wir auch dynamische Werte übergeben, wie z. B.:

 vardb = opendatabase ('mydb', '1.0', 'testDB', 2*1024*1024);
 db.transaction (Funktion (tx) {
 tx.executesql ('createTableIfnotexistsLogs (idunique, log)');
 tx.executesql ('InsertIntologen
 (id, log) Werte (?,? '), [e_id, e_log];
 });

Hier sind e_id und e_log externe Variablen, executesql -Karten jedes Element? in den Array -Parametern.

Operation lesen

Wenn Sie den bereits vorhandenen Datensatz lesen möchten, verwenden wir einen Rückruf, um das Ergebnis zu erfassen. Der Code lautet wie folgt:

 vardb = opendatabase ('mydb', '1.0', 'testDB', 2*1024*1024);
 db.transaction (Funktion (tx) {
 tx.executesql ('createTableIfnotexistsLogs (idunique, log)');
 tx.executesql ('InsertIntologs (ID, log) -Werte (1, foobar)');
 tx.executesql ('InsertIntologs (ID, log) -Werte (2, logMSG)');
 });
 db.transaction (Funktion (tx) {
 tx.executesql ('select*from llogs', [], function (tx, resultation) {
 varlen = results.rows.length, i;
 msg = <p> foundrows:+len+</p>;
 document.querySelector ('#Status'). InnerHtml+= msg;
 für (i = 0; i <len; i ++) {
 alert (results.rows.item (i) .log);
 }
 }, null);
 });

Vollständiges Beispiel

Schließlich präsentieren wir das, was zuvor in einem vollständigen HTML 5 -Dokument beschrieben wurde, während wir mit einem Browser das HTML 5 -Dokument analysieren.

 <! DocTypehtml>
 <html>
 <kopf>
 <scriptType = text/javaScript>
 vardb = opendatabase ('mydb', '1.0', 'testDB', 2*1024*1024);
 Varmsg;
 db.transaction (Funktion (tx) {
 tx.executesql ('createTableIfnotexistsLogs (idunique, log)');
 tx.executesql ('InsertIntologs (ID, log) -Werte (1, foobar)');
 tx.executesql ('InsertIntologs (ID, log) -Werte (2, logMSG)');
 msg = '<p> logMessagecreatedandrowinserted. </p>';
 document.querySelector ('#status'). innerHtml = msg;
 });
 db.transaction (Funktion (tx) {
 tx.executesql ('select*from llogs', [], function (tx, resultation) {
 varlen = results.rows.length, i;
 msg = <p> foundrows:+len+</p>;
 document.querySelector ('#Status'). InnerHtml+= msg;
 für (i = 0; i <len; i ++) {
 msg = <p> <b>+results.rows.item (i) .log+</b> </p>;
 document.querySelector ('#Status'). InnerHtml+= msg;
 }
 }, null);
 });
 </script>
 </head>
 <body>
 <divid = StatusName = Status> StatusMessage </div>
 </body>
 </html>

Nachfolgend finden Sie das Ausgabeergebnis, das in der neuesten Version des Safari- oder Opera -Browsers erstellt wurde.

 LogMessagecreatedandrowinserted.
 Foundrows: 2
 Foobar
 logmsg