データベース作成に挑戦

htmlのソース

<H1>Databaseへの書き込みと読み出し</H1>
<A href="#" onClick="saveDB();return false;">SaveDB</A><BR>
<A href="#" onClick="readDB();return false;">DBレコード読み込み</A><BR>
<DIV id="msg"></DIV>

javascriptのソース

// データベース作成
try {
    if (!window.openDatabase) {
        alert('not supported');
    } else {
        var shortName = 'mydatabase';
        var version = '1.0';
        var displayName = 'My Important Database';
        var maxSize = 65536; // in bytes
        var myDB  = openDatabase(shortName, version, displayName, maxSize);
        // You should have a database instance in db.
    }
} catch(e) {
    // Error handling code goes here.
    if (e == 2) {
        // Version number mismatch.
        alert("Invalid database version.");
    } else {
        alert("Unknown error "+e+".");
    }
 return;
}

//alert("Database is: "+myDB );

// ページが構築されたら処理を行う
window.onload = function(){
    var ele = document.getElementById("msg");
    myDB.transaction(
        function(tx){
            tx.executeSql('CREATE TABLE gpstable(lat REAL, lng REAL, time REAL );');
        },
        function (err){
            if (err.code == 1) {
                ele.innerHTML = "データベースtestDBはすでにあります";
            }else{
                ele.innerHTML = "データベースエラーです : "+err.code;
            }
        },
        function (){ ele.innerHTML = "testDBを作成しました"; }
    );
}
// データベースへの保存
function saveDB(){
    myDB.transaction(
        function(tx){
            // 3つのデータを書き込む
            tx.executeSql('INSERT INTO gpstable values (12.3, 45.6, 78.9)');
        },
        function(err){ alert("データベースエラー : "+err.code); },
        function (){ document.getElementById("msg").innerHTML = "データを保存しました" }
    );
}
// 保存してあるデータを読み出す
function readDB(){
    myDB.transaction(
        function(tx){
            // 全てのデータを読み出す
            tx.executeSql('SELECT * from gpstable;',
            [ ],
            function (tx, rs){
                var txt = "";
                // データの数(rs.rows.length)だけ繰り返し読み出す
                for (var i=0; i<rs.rows.length; i++){
                    var row = rs.rows.item(i);
                    txt = txt + row.lat+","+row.lng+" : "+row.time+"<br>";
                }
                // 画面に表示する
                document.getElementById("msg").innerHTML = txt;
            });
        }
    );
}

初期画面

DBレコード読み込み　をクリックした時

SaveDBをクリックすると同じデータが追加される