Latest web development tutorials

HTML5 Web SQL-Datenbank

Web SQL Datenbank-API ist nicht Teil der HTML5-Spezifikation, aber es ist eine separate Spezifikation, führte eine Reihe von APIs SQL-Operation Client-Datenbank zu verwenden.

Wenn Sie einen Web-Programmierer hinteren Ende sind, sollte es einfach sein SQL-Operationen zu verstehen.

Sie können auch auf unsere verweisen SQL - Tutorial , um mehr Wissen Datenbank - Operationen zu lernen.

Web SQL-Datenbank kann in der aktuellen Version von Safari, Chrome und Opera-Browser arbeiten.

Core-Methoden

Im Folgenden werden die drei Kernmethoden in der Spezifikation definiert:

  1. opendatabase: Bei dieser Methode wird eine bestehende Datenbank oder erstellen Sie eine neue Datenbank - Objektdatenbank.
  2. Transaktion: Diese Methode ermöglicht es uns , eine Transaktion zu kontrollieren, und auf der Grundlage dieser Fall Commit oder Rollback.
  3. ExecuteSQL: Diese Methode wird verwendet , um die tatsächliche SQL - Abfrage auszuführen.

Open Database

Wir können opendatabase () -Methode verwenden, um eine vorhandene Datenbank zu öffnen, wenn die Datenbank nicht existiert, erstellen Sie eine neue Datenbank, verwenden Sie den folgenden Code: 

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

opendatabase () Methode der fünf Parameter zur Beschreibung entsprechen:

  1. Datenbank-Name
  2. Die Versionsnummer
  3. Beschreibung Text
  4. Datenbankgröße
  5. Erstellen Sie einen Rückruf

Der fünfte Parameter, erstellen Sie einen Rückruf wird nach dem Erstellen der Datenbank abgerufen werden.

Zur Durchführung Abfrageoperationen

Die Ausführung verwendet database.transaction () Funktion: 

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

Die obige Anweisung erstellt eine Tabelle mit dem Namen LOGS in der 'mydb' Datenbank nach der Ausführung.

einfügen von Daten

Nach der obigen Anweisung ausführen, die Tabelle zu erstellen, 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, "本教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
});

Wir können auch einen dynamischen Wert verwenden, um die 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];
});

Instanz E_ID e_log und externen Variablen, ExecuteSQL Array-Parameter zu jedem Eintrag zugeordnet ist, in "?".

Lesen Sie Daten

Das folgende Beispiel zeigt, wie die Daten bereits in der Datenbank zu lesen: 

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, "本教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
});

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;
	
      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }
	
   }, null);
});

Komplettes Beispiel 

<!DOCTYPE HTML>
<html>

   <head>
	
      <script type="text/javascript">
		
         var db = openDatabase('mydb', '1.0', 'Test DB', 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, "本教程")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
            msg = '<p>数据表已创建，且插入了两条数据。</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>查询记录条数: " + 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);
         });
			
      </script>
		
   </head>
	
   <body>
      <div id="status" name="status">状态信息</div>
   </body>
	
</html>

Versuchen »

Beispiele für die obigen operativen Ergebnisse wie folgt:

Datensatz löschen

Format Löschen von Datensätzen sind wie folgt: 

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

Entfernen Sie die angegebenen Daten-ID auch dynamisch sein können: 

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

Verbuchungssätze

Aktualisieren von Datensätzen das folgende Format: 

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

Aktualisiert die angegebene Daten-ID auch dynamisch sein können: 

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

Komplettes Beispiel 

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">  
      <script type="text/javascript">
      
         var db = openDatabase('mydb', '1.0', 'Test DB', 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, "本教程")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
            msg = '<p>数据表已创建，且插入了两条数据。</p>';
            document.querySelector('#status').innerHTML =  msg;
         });

         db.transaction(function (tx) {
              tx.executeSql('DELETE FROM LOGS  WHERE id=1');
              msg = '<p>删除 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>更新 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>查询记录条数: " + 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);
         });
         
      </script>
      
   </head>
   
   <body>
      <div id="status" name="status">状态信息</div>
   </body>
   
</html>

Versuchen »

Beispiele für die obigen operativen Ergebnisse wie folgt: