HTML 5 基础教程

什么是 HTML5 Web SQL数据库？

为什么需要 HTML5 Web SQL数据库？

if ( typeof openDatabase == "undefined" ) {
    alert("您的浏览器不支持Web SQL");
} else {
    //支持Web SQL
}

• openDatabase：这个方法使用现有的数据库或者新建的数据库来创建一个JS数据库对象。
• transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
• executeSql：这个方法用于执行实际的 SQL 查询（DDL、DML、DCL）。

一，判断浏览器是否支持 HTML5 Web SQL

二，使用 openDatabase 打开或者创建一个数据库

var db = openDatabase('w3capi', '1.0', 'Test DB', 2 * 1024 * 1024,function (newdb){
    console.log(newdb);
});

1. 数据库名称
2. 版本号
3. 描述文本
4. 数据库大小
5. 数据库创建的回调函数：在创建数据库后被调用，如果数据库已经存在则不会进行回调

三，使用数据库对象的 transaction()方法 来开启事务

db.transaction(function (tx) {
});

四，执行SQL的增删改查操作

db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS user (id unique, name,age)');
});

一、创建数据库

<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>

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

<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>

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

tx.executeSql('SELECT *  FROM user ', [], function (tran, res) {
    var len = res.rows.length, i;
    var msg = "<p>查询user表中记录数量: " + len + "</p>";
    document.querySelector('#info').innerHTML +=  msg;

    for (i = 0; i < len; i++){
        msg = "<p><b>" + res.rows.item(i).name + "</b></p>";
        document.querySelector('#info').innerHTML +=  msg;
    }
},function(tran,error) {
    document.getElementById("info").innerHTML += "查询数据错误回掉，错误为："+error.message+"<br/>";
});

interface SQLResultSet {
    insertId: number;
    rowsAffected: number;
    rows: SQLResultSetRowList;
}

• insertId：如果 SQLResultSet对象 的 sql 语句插入到数据库中，则 insertid 属性必须返回该行的行 id。 如果该语句插入了多行，则最后一行的 id 必须是返回。如果该语句没有插入一行，则该属性必须引发 INVALID_ACCESS_ERR 异常。
• rowsAffected：rowsaffected 属性必须返回被 sql 语句更改的行数。 如果该语句没有影响任何行，则该属性必须返回零。 对于“ select”语句，这将返回零(查询数据库不会影响任何行)。
• rows：rows 属性必须按照数据库返回的顺序返回一个 SQLResultSetRowList对象，表示返回的行数据集合。 每次都必须返回相同的对象。 如果没有返回行，那么对象将为空(其长度为零)

一、删除数据：根据指定条件删除一条数据记录

//直接指定删除条件
tx.executeSql('DELETE FROM user  WHERE id=1 ', [], function (tran, res) {
    document.getElementById("info").innerHTML += "删除数据后执行回掉函数，结果为"+res.rowsAffected+"<br/>";
},function(tran,error) {
    document.getElementById("info").innerHTML += "删除数据错误回掉，错误为："+error.message+"<br/>";
});

二、更新数据

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