HTML5 Web SQL 数据库创建数据表并插入数据 - W3CAPI 在线教程

源代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5 Web SQL 数据库 创建数据表并插入数据</title>
</head>

<body>

</body>

//支持Web SQL
        var db = null;
        try {
            db = openDatabase('w3capi', '1.0', 'Test DB', 2 * 1024 * 1024, function (newdb) {
                console.log(newdb);
            });
        } catch (e) {
            db = openDatabase('w3capi', '', 'Test DB', 2 * 1024 * 1024, function (newdb) {
                console.log(newdb);
            });
        }

db.transaction(function (tx) {

tx.executeSql('CREATE TABLE IF NOT EXISTS user (id unique, name)',[],function(tran,res){
 document.getElementById("info").innerHTML += "创建数据表后执行回掉函数，结果为"+res.rowsAffected+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "创建数据表错误回掉，错误为："+error.message+" ";
 });

tx.executeSql('INSERT INTO user (id, name) VALUES (1, "小王")',[],function(tran,res){
 document.getElementById("info").innerHTML += "插入数据后执行回掉函数，结果为"+res.rowsAffected+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "插入数据错误回掉，错误为："+error.message+" ";
 });

tx.executeSql('INSERT INTO user (id, name) VALUES (2, "小李")',[],function(tran,res){
 document.getElementById("info").innerHTML += "插入数据后执行回掉函数，结果为"+res.rowsAffected+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "插入数据错误回掉，错误为："+error.message+" ";
 });

//打开注释，使用executeSql函数的 第二个参数来实现动态绑定数据插入；executeSql 会映射数组参数中的每个条目给sql语句中的占位符 "?"
 /*
 var id=3,name='小张';
 tx.executeSql('INSERT INTO user (id,name) VALUES (?, ?)', [id, name],function(tran,res){
 document.getElementById("info").innerHTML += "插入数据后执行回掉函数，结果为"+res.rowsAffected+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "插入数据错误回掉，错误为："+error.message+" ";
 });
 */

});
 }
</script>

</html>

运行结果

W3CAPI 实例工具箱