HTML5 Web SQL-Datenbank

Web SQL-Status:Die Web SQL API ist veraltet und wird nicht mehr empfohlen. Neue Browserstandards bevorzugen IndexedDB für clientseitige Speicherung. Web SQL wird nur noch in einigen älteren Browsern unterstützt.

Alternative: Da die Zukunft von Web SQL unsicher ist und es nicht mehr breit unterstützt wird, wird empfohlen, zu IndexedDB zu wechseln, einer modernen Browser-API, die Transaktionen und Schlüssel-Wert-Paar-Speicherung unterstützt.

Die Web SQL Database API ist nicht Teil der HTML5-Spezifikation, sondern eine unabhängige Spezifikation, die eine Reihe von APIs für die Verwendung von SQL zum Betrieb clientseitiger Datenbanken einführt.

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

Sie können auch auf unserSQL-Tutorialverweisen, um mehr über Datenbankoperationen zu erfahren.

Web SQL Database funktioniert in den neuesten Versionen der Browser Safari, Chrome und Opera.

Kernmethoden

Die folgenden drei Kernmethoden sind in der Spezifikation definiert:

  1. openDatabase: Diese Methode erstellt ein Datenbankobjekt unter Verwendung einer vorhandenen Datenbank oder einer neu erstellten Datenbank.
  2. transaction: Diese Methode ermöglicht es uns, eine Transaktion zu steuern und je nach Situation ein Commit oder Rollback durchzuführen.
  3. executeSql: Diese Methode wird verwendet, um tatsächliche SQL-Abfragen auszuführen.

Datenbank öffnen

Wir können die Methode openDatabase() verwenden, um eine vorhandene Datenbank zu öffnen. Wenn die Datenbank nicht existiert, wird eine neue Datenbank erstellt. Der Verwendungscode lautet wie folgt:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

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

  1. Datenbankname
  2. Versionsnummer
  3. Beschreibungstext
  4. Datenbankgröße
  5. Erstellungs-Callback

Der fünfte Parameter, der Erstellungs-Callback, wird aufgerufen, nachdem die Datenbank erstellt wurde.

Abfrageoperationen ausführen

Verwenden Sie die Funktion database.transaction(), um Operationen auszuführen:

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)'); });

Nachdem die obige Anweisung ausgeführt wurde, wird eine Tabelle namens LOGS in der Datenbank 'mydb' erstellt.

Daten einfügen

Nach Ausführung der obigen Anweisung zur Tabellenerstellung können wir einige Daten einfügen:

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, "Example Tutorial")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")'); });

Wir können auch dynamische Werte verwenden, um Daten einzufügen:

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]); });

Im Beispiel sind e_id und e_log externe Variablen. executeSql ordnet jeden Eintrag im Array-Parameter dem "?" zu.

Daten lesen

Das folgende Beispiel zeigt, wie Daten gelesen werden, die bereits in der Datenbank vorhanden sind:

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, "Example Tutorial")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")'); }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>Anzahl der Datensätze abfragen:" + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).log ); } }, null); });

Vollständiges Beispiel

Beispiel

var db = openDatabase('mydb', '1.0', 'Testdatenbank', 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, "Example Tutorial")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")'); msg = '<p>Die Datentabelle wurde erstellt und zwei Datensätze wurden eingefügt.</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>Anzahl der Datensätze abfragen:" + 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); });

Selbst ausprobieren »

Das Ausführungsergebnis des obigen Beispiels ist in der folgenden Abbildung dargestellt:

Datensätze löschen

Das Format zum Löschen von Datensätzen ist wie folgt:

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

Die id der angegebenen zu löschenden Daten kann auch dynamisch sein:

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

Datensätze aktualisieren

Das Format zum Aktualisieren von Datensätzen ist wie folgt:

db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});

Die id der angegebenen zu aktualisierenden Daten kann auch dynamisch sein:

db.transaction(function(tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

Vollständiges Beispiel

Beispiel

var db = openDatabase('mydb', '1.0', 'Testdatenbank', 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, "Example Tutorial")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")'); msg = '<p>Die Datentabelle wurde erstellt und zwei Datensätze wurden eingefügt.</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1'); msg = '<p>Lösche den Datensatz mit 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>Aktualisiere den Datensatz mit 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>Anzahl der Datensätze abfragen:" + 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); });

Selbst ausprobieren »

Das Ausführungsergebnis des obigen Beispiels ist in der folgenden Abbildung dargestellt:

Andere Erweiterungen