HTML5 Web SQLデータベースの詳細な紹介

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

コアメソッド

openDatabase - 既存のデータベースまたは新しいデータベースを使用してデータベースオブジェクトを作成します

トランザクション - 物事を制御し、この状況に基づいてコミットまたはロールバックを実行できます

executeSql - 実際の SQL を実行しますステートメント

データベースを開く

//用openDatabase()方法打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase() 5 つのパラメーターに対応するメソッド 説明:

1. データベース名

2. バージョン番号

3. 説明テキスト

4. データベースサイズ (バイト) )

5. 作成コールバック (オプション)

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

テーブルを作成する

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

データを挿入

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

動的値を使用してデータを挿入することもできます

//e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"
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]);
});

データを読み取る

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.cnblogs.com")');
});
 
db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector(&#39;#status&#39;).innerHTML +=  msg;
    
      for (i = 0; i < len; i++){
          msg = "<p><b>" + results.rows[i].log + "</b></p>";
      }
    
   }, null);
});

レコードを削除

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

削除されたデータも動的にすることができます

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

レコードを更新します

tx.executeSql("UPDATE CC SET logname='www.baidu.com' WHERE id=2");

更新されたデータも動的にすることができます

tx.executeSql("UPDATE CC SET logname='www.baidu.com' WHERE id=?", [id]);

: 削除と変更は許可されませんテーブル作成ステートメントと同じexecuteSqlに置くことができますが、別々に記述するのがベストです

構築されたデータベースは以下の通りです

以上がHTML5 Web SQLデータベースの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。