Latest web development tutorials

HTML5 Web SQL Database

Web SQL Database API nie jest częścią specyfikacji HTML5, ale to osobna specyfikacja, wprowadziła zestaw funkcji API do korzystania z bazy danych klienta operacji SQL.

Jeśli jesteś programistą WWW tył, to powinno być łatwe do zrozumienia operacji SQL.

Można także zapoznać się z naszym poradniku SQL , aby dowiedzieć się więcej operacji bazy wiedzy.

Web SQL Database może pracować w najnowszej wersji Safari, Chrome i przeglądarki Opera.

Podstawowe metody

Poniżej znajdują się trzy podstawowe metody zdefiniowane w specyfikacji:

  1. openDatabase: Metoda ta wykorzystuje istniejącą bazę danych lub utworzyć nową bazę danych obiektów bazy danych.
  2. Transakcja: Metoda ta pozwala nam na kontrolę transakcji, oraz w oparciu o takim przypadku zobowiązania lub wycofania.
  3. ExecuteSQL: Metoda ta służy do wykonywania rzeczywiste zapytanie SQL.

Otwieranie bazy danych

metodę OpenDatabase () możemy użyć, aby otworzyć istniejącą bazę danych, jeśli baza danych nie istnieje, należy utworzyć nową bazę danych, należy użyć następującego kodu: 

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

openDatabase () w pięciu parametrów odpowiadających opisie:

  1. Nazwa bazy danych
  2. Numer wersji
  3. Opis Text
  4. Wielkość bazy danych
  5. Tworzenie zwrotnego

Piąty parametr stworzyć callback zostanie wywołana po utworzeniu bazy danych.

Aby wykonać operacje zapytań

Wykonanie wykorzystuje database.transaction funkcji (): 

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

Powyższa instrukcja tworzy tabelę o nazwie loguje się do bazy "mydb" po egzekucji.

Należy wprowadzić dane

Po wykonaniu powyższego oświadczenia do tworzenia tabeli, możemy wstawić niektóre dane: 

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

Możemy również użyć wartości dynamicznej wstawić dane: 

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

Instancja e_id e_log zmienne zewnętrzne, tablica ExecuteSQL parametr jest mapowany do każdego wpisu w "?".

odczytać dane

Poniższy przykład pokazuje, jak odczytywać dane już w bazie danych: 

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

Kompletny przykład 

<!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>

Spróbuj »

Przykłady powyższych wyników operacyjnych, jak pokazano poniżej:

Usuń rekord

Format usuwać rekordy są w następujący sposób: 

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

Usuń określony id Dane te mogą być także dynamiczna: 

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

Aktualizuj Records

Zapisy Aktualizuj używając następującego formatu: 

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

Aktualizuje określonego identyfikatora Dane te mogą być także dynamiczna: 

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

Kompletny przykład 

<!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>

Spróbuj »

Przykłady powyższych wyników operacyjnych, jak pokazano poniżej: