HTML5のWeb SQLデータベースとは?

HTML コース
HTML5
HTML メディア
HTML リファレンスマニュアル

HTML5のWeb SQLデータベース2024 年の最新の入門チュートリアル。このコースではコアの方法,データベースを開きます,クエリ操作を実行します,データを挿入,データを読みます,完全な例,レコードを削除します,更新レコード,完全な例, について学習できます。

HTML5のWeb SQLデータベース

前：HTML5のMathML

次へ：HTML（5）コードの仕様

ウェブSQLデータベースAPIは、HTML5仕様の一部ではありませんが、それは、独立した仕様であるSQL操作クライアントデータベースを使用するためのAPIのセットを導入しました。

あなたは、Webプログラマ後端している場合は、SQL操作を理解することが容易であるべきです。

また、私たちを参照することができますSQLのチュートリアルより多くの知識のデータベース操作を学習します。

ウェブSQLデータベースは、サファリ、ChromeとOperaブラウザの最新バージョンで動作することができます。

コアの方法

以下は、仕様で定義された3つのコアメソッドです：

OpenDatabaseメソッド：このメソッドは、既存のデータベースを使用するか、または新しいデータベース・オブジェクト・データベースを作成します。
トランザクション：このメソッドは、私たちは、トランザクションを制御することができ、この場合に基づいてコミットまたはロールバックします。
ExecuteSQL：この方法は、実際のSQLクエリを実行するために使用されます。

データベースを開きます

データベースが存在しない場合、私たちは、次のコードを使用し、新しいデータベースを作成し、既存のデータベースを開くために、OpenDatabaseメソッド（）メソッドを使用することができます。

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

記述に対応する5つのパラメータのOpenDatabaseメソッド（）メソッド：

データベースの名前
バージョン番号
説明テキスト
データベースのサイズ
コールバックを作成します。

5番目のパラメータ、コールバックを作成するには、データベースを作成した後に呼び出されます。

クエリ操作を実行します

実行はdatabase.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)');
});

上記の文は、実行後に「MYDB」データベース内のテーブルという名前のログが作成されます。

データを挿入

テーブルを作成するために、上記のステートメントを実行した後、我々はいくつかのデータを挿入することができます。

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

また、データを挿入するために動的な値を使用することができます。

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_logと外部変数、は、ExecuteSQL配列パラメータは、各エントリにマッピングされているE_ID「？。」

データを読みます

次の例では、データベースに既にデータを読み取る方法を示しています。

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

完全な例

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

»をお試しください

上記の動作の結果の例を以下に示すとおり

レコードを削除します

フォーマットは、レコードを削除する次のとおりです。

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

指定されたデータIDは、動的することができます削除します。

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

更新レコード

次の形式を使用してレコードを更新します：

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

指定されたデータIDは、動的することができます更新します。

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

完全な例

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

»をお試しください

上記の動作の結果の例を以下に示すとおり