読者です 読者をやめる 読者になる 読者になる

ほげほげ(仮)

仮死状態

WebDatabaseをやってみた

JavaScript


まずは準備として次のように変数を定義します。

var webdb = {};
webdb.db = null;


Databaseオープンするメソッドを定義します。

webdb.open = function() {
    var dbSize = 5 * 1024 * 1024;
    webdb.db = openDatabase('Sample', '1.0', 'SampleDB', dbSize);
}

openDatabaseの引数は順番にデータベース名、バージョン、説明、DB容量を指定します。
戻り値のDatabaseオブジェクトを変数に格納しています。
この戻り値のオブジェクトでSQLを発行していきます。


CREATE TABEL文を発行するメソッドを定義します。

webdb.createTable = function(success, error) {
    webdb.db.transaction(function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS SAMPLE(ID INTEGER PRIMARY KEY ASC, NAME TEXT, CREATE_DATE DATETIME)', [], success, error);
    });
}

Databaseオブジェクトのtransactionメソッド内でexecuteSqlメソッドを使用してSQLを発行していきます。
引数は順番にSQL、パラメーター、成功時コールバック、エラー時コールバックになります。


INSERT、SELECT、DELETE文を発行するメソッドを定義します。

webdb.insert = function(name, success, error) {
    webdb.db.transaction(function(tx){
        var d = new Date();
        tx.executeSql('INSERT INTO SAMPLE(NAME, CREATE_DATE) VALUES (?,?)', [name, d], success, error);
    })
}
webdb.selectData = function(success, error) {
    webdb.db.readTransaction(function(tx){
        tx.executeSql('SELECT ID, NAME, CREATE_DATE FROM SAMPLE', [], success, error);
    })
}
webdb.deleteData = function(success, error) {
    webdb.db.transaction(function(tx){
        tx.executeSql('DELETE FROM SAMPLE', [], success, error);
    })
}

これも同様にexecuteSqlを使用してSQLを発行しています。


INSERT文ではパラメーターで登録する値を設定します。
「?」を使って値を設定することで、SQLインジェクションにも対応しています。


SELECT文ではtransactionでも良いみたいですけど、readTransactionを使っています。
違いとしてはtransactionは書き込み/読み込み可能で、readTransaction読み込みのみなります。
読み込み時のtransactionとreadTransactionとの違いはよく分かってないです・・・
おそらくロックするとかそういう感じだとは思うんですが・・・


次にSELECT文でのデータ取得メソッドを定義します。

function result(tx, rs) {
    for (var i = 0; i < rs.rows.length; i++) {
        // ここで取得したデータを処理
    }
}

このメソッドをSELECT文発行時の成功時コールバック引数に渡します。
SELECT文が成功すると第2引数に結果が格納されてくるので、これを処理します。


これで準備が整いましたで、実際に処理を書いていきます。


今回は入力されたテキストを保存する単純な処理を書きました。

f:id:STAR_ZERO:20100715002156p:image

テキストに値を入力して「データ作成」を押すとデータがされて
「データ取得」を押すと作成されているデータが表示されます。
「データ削除」を押すと全件データが削除されます。


WebDatabaseサンプル


参考サイト:
HTML5ROCKS
Web SQL Database


まだまだ理解してない部分も多くて、全然キレイに書けてないですが、全ソースを載せておきます。
Chromeでしか動作確認していませんので、ご了承ください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebDatabase</title>
<script type="text/javascript">
var webdb = {};
webdb.db = null;

// Databaseオープン
webdb.open = function() {
    var dbSize = 5 * 1024 * 1024;
    webdb.db = openDatabase('Sample', '1.0', 'SampleDB', dbSize);
}
// テーブル作成
webdb.createTable = function() {
    webdb.db.transaction(function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS SAMPLE(ID INTEGER PRIMARY KEY ASC, NAME TEXT, CREATE_DATE DATETIME)', []);
    });
}
// データ作成
webdb.insert = function(name, success, error) {
    webdb.db.transaction(function(tx){
        var d = new Date();
        tx.executeSql('INSERT INTO SAMPLE(NAME, CREATE_DATE) VALUES (?,?)', [name, d], success, error);
    })
}
// データ取得
webdb.selectData = function(success, error) {
    webdb.db.readTransaction(function(tx){
        tx.executeSql('SELECT ID, NAME, CREATE_DATE FROM SAMPLE', [], success, error);
    })
}
// データ削除
webdb.deleteData = function(success, error) {
    webdb.db.transaction(function(tx){
        tx.executeSql('DELETE FROM SAMPLE', [], success, error);
    })
}

// エラー
function dbError(tx, e) {
    alert('エラー' + e.message);
}
// データ作成が成功
function insertSuccess(tx) {
    alert('データを作成しました。');
}
// データ削除が成功
function deleteSuccess(tx) {
    // 結果のクリア
    var d = document.getElementById('result');
    while (d.firstChild) {
        d.removeChild(d.firstChild);
    }
    alert('データを削除しました。');
}
// データ取得が成功
function result(tx, rs) {

    // 結果のクリア
    var d = document.getElementById('result');
    while (d.firstChild) {
        d.removeChild(d.firstChild);
    }

    var table = document.createElement('table');
    table.border = '1';

    // 取得データを表示
    for (var i = 0; i < rs.rows.length; i++) {

        var tr = document.createElement('tr');
        var id = document.createElement('td');
        var name = document.createElement('td');
        var date = document.createElement('td');

        id.innerText = rs.rows.item(i).ID;
        name.innerText = rs.rows.item(i).NAME;
        date.innerText = rs.rows.item(i).CREATE_DATE;

        tr.appendChild(id);
        tr.appendChild(name);
        tr.appendChild(date);

        table.appendChild(tr);
    }
    d.appendChild(table);
}


// 初期化処理
function init() {
    // Databaseオープン
    webdb.open();
    // テーブル作成
    webdb.createTable();
}
// データ作成
function insert() {
    var name = document.getElementById('text').value;
    webdb.insert(name, insertSuccess, dbError);
}
// データ取得
function getData() {
    webdb.selectData(result, dbError);
}
// データ削除
function delData() {
    webdb.deleteData(deleteSuccess, dbError);
}
</script>
</head>
<body onload="init()">
<input type="text" id="text">
<input type="button" value="データ作成" onclick="insert()">
<input type="button" value="データ取得" onclick="getData()">
<input type="button" value="データ削除" onclick="delData()">
<div id="result">
</div>
</body>
</html>