HTML5 Web SQL

HTML5 Web SQL Database

Web SQL Database API は HTML5 仕様の一部ではありませんが、SQL を使用してクライアントデータベースを操作するための API セットを?qū)毪工氇毩ⅳ筏渴藰敜扦埂?

Web バックエンドプログラマーであれば、SQL 操作を簡単に理解できるはずです。

データベース操作の詳細(xì)については、SQL チュートリアルを參照することもできます。

Web SQL データベースは、Safari、Chrome、Opera ブラウザの最新バージョンで動作します。

コアメソッド

仕様で定義されている 3 つのコアメソッドは次のとおりです:

openDatabase: このメソッドは、既存のデータベースまたは新しいデータベースを使用してデータベースオブジェクトを作成します。
transaction: このメソッドを使用すると、トランザクションを制御し、この狀況に基づいてコミットまたはロールバックを?qū)g行できます。
executeSql: このメソッドは、実際の SQL クエリを?qū)g行するために使用されます。

データベースを開きます

データベースが存在しない場合、openDatabase()メソッドを使用して、新しいデータベースが作成されます:

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

openDatabase() メソッドは 5 つのパラメータに対応します:

データベース名
バージョン番號
説明テキスト
データベースサイズ
作成コールバック

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

クエリ操作を?qū)g行する

database.transaction()関數(shù)を使用して操作を?qū)g行する:

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

上記のステートメントが実行されると、 be in 'mydb' データベースに LOGS という名前のテーブルを作成します。

データの挿入

上記の create table ステートメントを?qū)g行した後、いくつかのデータを挿入できます:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('ログが存在しない場合にテーブルを作成 (ID 固有、ログ)');
tx.executeSql('ログに挿入 (ID、ログ) ) VALUES (1, "php中文網(wǎng)")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "ipnx.cn")');
});

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

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function ( tx) {E TX.Executesql ('Create Table If NOT Exist Logs (ID Unique, Log)'); _Log] ;
});

インスタンス內(nèi)の e_id と e_log は外部変數(shù)であり、executeSql がそれぞれをマッピングします。配列パラメータのエントリを「?」にします。
データの読み取り
次の例は、データベースにすでに存在するデータを読み取る方法を示しています:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {
tx.executeSql('ログが存在しない場合にテーブルを作成 (ID が一意、ログ)');
tx.executeSql('ログに挿入 (ID、ログ) ) ) VALUES (1, "php中文網(wǎng)")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "ipnx.cn")');
});

db .transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p> ; レコード數(shù)をクエリします: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;

for (i = 0; i alert(results.rows.item(i).log );
}

}, null);
});
完全な例
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(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中文網(wǎng)")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "ipnx.cn")');
            msg = '<p>數(shù)據(jù)表已創(chuàng)建，且插入了兩條數(shù)據(jù)。</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>查詢記錄條數(shù): " + 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">狀態(tài)信息</div>
</body>
</html>
プログラムの実行結(jié)果:

レコードの削除
レコードの削除に使用される形式は次のとおりです。
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]);
});
更新レコード
更新レコードは次の形式を使用します:
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">
    <title>php中文網(wǎng)(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中文網(wǎng)")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "ipnx.cn")');
            msg = '<p>數(shù)據(jù)表已創(chuàng)建，且插入了兩條數(shù)據(jù)。</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>查詢記錄條數(shù): " + 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">狀態(tài)信息</div>
</body>
</html>
プログラムの実行結(jié)果:

學(xué)び続ける

新しいファイル

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(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中文網(wǎng)")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "ipnx.cn")'); msg = '<p>數(shù)據(jù)表已創(chuàng)建，且插入了兩條數(shù)據(jù)。</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>查詢記錄條數(shù): " + 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">狀態(tài)信息</div> </body> </html>

提出するリセットコード

自動運転