HTML5 Web SQL 数据库更新数据 - W3CAPI 在线教程

源代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5 Web SQL 数据库 更新数据</title>
</head>

<body>

提示：多次执行会出现错误，表示数据记录已经存在，请清空一下浏览器缓存或者关闭错误回调函数后重试一下。

</body>

if ( typeof openDatabase == "undefined" ) {
        document.getElementById("info").innerHTML = "您的浏览器不支持Web SQL";
    } else {

//支持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+" ";
 });

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+" ";
 });

//更新前查询数据
 tx.executeSql('SELECT * FROM user WHERE id=1 ', [], function (tran, res) {
 document.getElementById("info").innerHTML += "更新数据前 --- 查询数据后执行回掉函数，结果为"+res.rows.item(0).name+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "更新数据错误回掉，错误为："+error.message+" ";
 });

//直接指定更新条件
 tx.executeSql('UPDATE user SET name=\'小王_new\' WHERE id=1 ', [], function (tran, res) {
 document.getElementById("info").innerHTML += "更新数据后执行回掉函数，结果为"+res.rowsAffected+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "更新数据错误回掉，错误为："+error.message+" ";
 });

/*
 //更新所有记录
 tx.executeSql('UPDATE user SET name=\'new\' ', [], function (tran, res) {
 document.getElementById("info").innerHTML += "更新数据后执行回掉函数，结果为"+res.rowsAffected+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "更新数据错误回掉，错误为："+error.message+" ";
 });
 */

/*
 //打开注释使用 动态参数绑定指定更新条件
 var id = 1;
 tx.executeSql('UPDATE user SET name=\'小王_new\' WHERE id=? ', [id], function (tran, res) {
 document.getElementById("info").innerHTML += "更新数据后执行回掉函数，结果为"+res.rowsAffected+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "更新数据错误回掉，错误为："+error.message+" ";
 });
 */

//更新后查询数据
 tx.executeSql('SELECT * FROM user WHERE id=1 ', [], function (tran, res) {
 document.getElementById("info").innerHTML += "更新数据后 --- 查询数据后执行回掉函数，结果为"+res.rows.item(0).name+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "更新数据错误回掉，错误为："+error.message+" ";
 });

});
 }
</script>

</html>

运行结果

W3CAPI 实例工具箱