HTML5本地数据库功能测试

HTML5可以直接创建和访问本地的Sqlite数据,对于暂存一些业务数据应该是足够使用,可惜IE和Firefox都不支持,大大限制了实际使用场景。
下面是几个核心API的用法,并在Chrome浏览器下测试通过。

创建数据库和表

function open_db(db_name) {
    var db = openDatabase(db_name, '1.0', db_name, 1024*1024);
    create_table(db);
    return db;
}

function create_table(db) {
    db.transaction(function (trans) {
        trans.executeSql("create table if not exists users(nick_name text null, phone_number text null)",
            [],
            function (ts, data) {},
            function (ts, message) {
                alert(message);
            }
        );
    });
}

插入和查询数据

$('#btn-create').click(function() {
    var db = open_db('contacts');
    if (!db) {
        alert('无法创建本地数据库!');
        return false;
    }
    var nick_name = $('#nick_name').val();
    var phone_number = $('#phone_number').val();
    db.transaction(function (trans) {
        trans.executeSql("insert into users values(?, ?)", [nick_name, phone_number],
            function (ts, data) {
                alert('创建成功!');
            },
            function (ts, message) {
                alert(message);
            }
        );
    });
});
$('#btn-list').click(function() {
    var db = open_db('contacts')
    var keyword = $('#keyword').val();
    db.transaction(function (trans) {
        trans.executeSql("select * from users where nick_name like '%' || ? || '%' ", [keyword],
            function (ts, data) {
                $('#user-list').empty();
                for(var i=0; i < data.rows.length; i++) {
                    var row = data.rows.item(i);
                    var line_text = row.nick_name + '|' + row.phone_number;
                    $('<p>' + line_text + '</p>').appendTo('#user-list');
                }
            },
            function (ts, message) {
                alert(message);
            }
        );
    });
});

Comments are closed.