HTML5 Web SQL


API Pangkalan Data Web SQL bukan sebahagian daripada spesifikasi HTML5, tetapi ia adalah spesifikasi bebas yang memperkenalkan satu set API untuk mengendalikan pangkalan data klien menggunakan SQL.

Jika anda seorang pengaturcara bahagian belakang web, operasi SQL sepatutnya mudah difahami.

Anda juga boleh merujuk kepada tutorial SQL kami untuk mengetahui lebih lanjut tentang operasi pangkalan data.

Pangkalan data SQL Web berfungsi dalam versi terkini penyemak imbas Safari, Chrome dan Opera.

Kaedah Teras

Berikut ialah tiga kaedah teras yang ditakrifkan dalam spesifikasi:

  1. openDatabase: Ini kaedah Cipta objek pangkalan data menggunakan pangkalan data sedia ada atau pangkalan data baharu.

  2. transaksi: Kaedah ini membolehkan kami mengawal urus niaga dan melakukan komit atau rollback berdasarkan situasi ini.

  3. executeSql: Kaedah ini digunakan untuk melaksanakan pertanyaan SQL sebenar.

Buka pangkalan data

Kita boleh menggunakan kaedah openDatabase() untuk membuka pangkalan data sedia ada Jika pangkalan data tidak wujud, pangkalan data baharu akan dibuat . Kod penggunaan adalah seperti berikut: 

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

Penerangan bagi lima parameter yang sepadan dengan kaedah openDatabase():

  1. Nama pangkalan data

  2. Nombor versi

  3. Teks penerangan

  4. Saiz pangkalan data

  5. Buat panggilan balik

Parameter kelima, panggilan balik penciptaan akan dipanggil selepas pangkalan data dibuat.

Laksanakan operasi pertanyaan

Laksanakan operasi menggunakan fungsi pangkalan data.transaction(): 

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

Selepas pernyataan di atas dilaksanakan, nama akan dicipta dalam pangkalan data 'mydb' ialah jadual LOG.

Sisipkan data

Selepas melaksanakan penyataan jadual cipta di atas, kami boleh memasukkan beberapa data: 

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, "php中文网")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
});

Kami juga boleh menggunakan nilai dinamik untuk memasukkan data: 

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

e_id dan e_log dalam contoh adalah pembolehubah luaran, dan executeSql akan memetakan setiap entri dalam parameter tatasusunan kepada "?".

Membaca data

Contoh berikut menunjukkan cara membaca data yang telah wujud dalam pangkalan data: 

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, "php中文网")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
});

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

Contoh penuh

Instance

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">
      <title>php中文网(php.cn)</title> 
      <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, "php中文网")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
            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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian


Padam rekod

Format yang digunakan untuk memadam rekod adalah seperti berikut: 

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

Memadamkan id data yang ditentukan juga boleh menjadi dinamik: 

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

Kemas kini rekod

Format yang digunakan untuk mengemas kini rekod adalah seperti berikut: 

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

Kemas kini id data yang ditentukan juga boleh menjadi dinamik: 

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

Contoh penuh

Instance

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">  
	   <title>php中文网(php.cn)</title> 
      <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, "php中文网")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
            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=\'php.cn\' 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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian