Detaillierte Erläuterung der lokalen HTML5-Datenbankinstanz

Web-SQL-Datenbanken von HTML5 (lokale HTML5-Datenbank) sind in der Tat sehr verlockend. Wenn Sie feststellen, dass Sie dieselbe Abfrageanweisung wie MySQL-Abfrage verwenden können, um die lokale Datenbank zu betreiben, werden Sie diese Sache sehr interessant finden. 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 vorgestellt, wie man eine Datenbank erstellt und öffnet, eine Tabelle erstellt, Daten hinzufügt, Daten aktualisiert , Daten löscht und eine Tabelle löscht.
Führen Sie zunächst drei Kernmethoden ein
1. openDatabase: Diese Methode verwendet eine vorhandene Datenbank oder erstellt eine neue DatenbankErstellt ein Datenbankobjekt. 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 eins: Öffnen Sie die Verbindung und erstellen Sie die Datenbank

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 zum Öffnen einer Eine vorhandene Datenbank kann 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);     
}); 
});
}

Erklären Sie, dass die Funktion

executeSql vier Parameter hat Bedeutungen sind jeweils Ja:
1) Die
-Zeichenfolge stellt die Abfrage dar, 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 failed
Fehlermeldung .
Schritt 3: CRUD durchführen1) Daten hinzufügen:

Der Code lautet 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) Daten abfragen

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 ihn

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 die DataTable in C#. SQLResultSet ist definiert als:

Der Code lautet wie folgt:

interface  SQLResultSet {
             readonly  attribute  long  insertId;
             readonly  attribute  long  rowsAffected;
             readonly  attribute  SQLResultSetRow
List
  rows;
             };

Das wichtigste

Attribut – die Zeilen vom Typ SQLResultSetRowList sind die „Zeilen“ 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

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

[Verwandte Empfehlungen]

1.

Kostenloses HTML5-Video-Tutorial

2.

H5-Code-Demonstration zum Erstellen eines Timers

3 Ausfüllen mehrerer Bild-Uploads

4. Detaillierte Erläuterung der benutzerdefinierten Attributdaten von H5-*

Lernen Sie, wie Sie ein H5-Mikro- Szene

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der lokalen HTML5-Datenbankinstanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!