ScarShow

< IS >

建立及使用 HTML5 SQL Database

HTML5提供了許多的新功能其中一項就是Local端的儲存功能,在Javascript中的函示分別為window.openDatabase及window.localStorage,window.openDatabase相較於Cookie有很大的不同,而window.localStorage比較相近於Cookie是一種key-value的儲存方式。

使用window.openDatabase的方法,這是在Local端建立一個SQL資料庫

var db = window.openDatabase(name, version, display_name, size);

接著就可以下達SQL指令,使用以下的方式

db.transaction(query, error, success);
var query = function(tx) {
    var sql = 'doSomething';
    var value = [];
    tx.executeSql(sql, value, function(tx, result) {
        // do something
    }, function(tx, error) {
        // do something
    });
}

var error = function(err) {
    // do something
}

var success = function() {
    // do something
}

連起來寫就會像是這樣

if(window.openDatabase) {
    var db = window.openDatabase('TestDB', '0.1', 'Test local DB', 65535);
    db.transaction(
        function(tx) {
            var createTable = 'CREATE TABLE `test` IF NOT EXISTS'
                + '(`id` INT, `name` TEXT, `age` INT, `sex` TEXT)';
            tx.executeSql(createTable);

            tx.executeSql('INSERT INTO `test` (`id`, `name`, `age`, `sex`) VALUES(1, 'Tom', 20, 'Male')');
            tx.executeSql('INSERT INTO `test` (`id`, `name`, `age`, `sex`) VALUES(2, 'John', 20, 'Male')');
            tx.executeSql('INSERT INTO `test` (`id`, `name`, `age`, `sex`) VALUES(3, 'Iris', 20, 'Female')');

            var sqlQuery = 'SELECT * FROM `test` WHERE `age`=? AND `sex`=?';
            var value = [20, 'Male'];
            tx.excuteSql(
                sqlQuery, value,
                function(tx, rs) {
                    for(var i = 0;i &lt; rs.rows.length;i++)
                        alert(rs.rows.item(i).name);
                }, function(tx, err) {
                    // do something
                }
            );
        }, funciton(error) {
            // do something
        }, function() {
            // do something
        }
    );
}