HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 Web SQL数据库插入数据实例

一、创建数据库

既然是数据库就要有数据库的增删改查操作，在使用步骤的说明中我们已经了解了如何创建数据库：

<script type="text/javascript">
    if ( typeof openDatabase == "undefined" ) {
        document.getElementById("info").innerText = "您的浏览器不支持Web SQL";
    } else {
        //支持Web SQL
        var db = openDatabase('w3capi', '1.0', 'Test DB', 2 * 1024 * 1024,function (newdb){
            console.log(newdb);
        });
        document.getElementById("info").innerText = "数据库 w3capi 已经创建成功了！";
    }
</script>

执行一下

二、创建数据表并插入数据

创建完数据库后，我们需要创建表并插入数据，如下代码：我们创建一个user表并插入几条数据：

<script type="text/javascript">
    if ( typeof openDatabase == "undefined" ) {
        document.getElementById("info").innerHTML = "您的浏览器不支持Web SQL";
    } else {

        //支持Web SQL
        var db = openDatabase('w3capi', '1.0', '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+"<br/>";
            },function(tran,error) {
                document.getElementById("info").innerHTML += "创建数据表错误回掉，错误为："+error.message+"<br/>";
            });

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

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

            //打开注释，使用executeSql函数的 第二个参数来实现动态绑定数据插入
            /*
            var id=3,name='小张';
            tx.executeSql('INSERT INTO user (id,name) VALUES (?, ?)', [id, name],function(tran,res){
                document.getElementById("info").innerHTML += "插入数据后执行回掉函数，结果为"+res.rowsAffected+"<br/>";
            },function(tran,error) {
                document.getElementById("info").innerHTML += "插入数据错误回掉，错误为："+error.message+"<br/>";
            });
            */

        });
    }
</script>

执行一下

如上代码中我们使用了executeSql函数来执行sql创建和插入语句，这个函数一共有四个参数：

sqlStatement：表示一个sql语句字符串
arguments：表示一个要动态绑定到sql语句中的数据列表，需要在sql语句中使用占位符来配合实现
callback：表示一个结果回调函数，如果sql语句执行成功，则回调此函数
errorCallback：表示一个错误的回调，如果sql语句执行错误，则回调此函数

作者文档

HTML 5 基础教程

HTML5 Web SQL数据库 插入数据实例

一、创建数据库

二、创建数据表并插入数据

HTML5 Web SQL数据库插入数据实例