HTML5 Web SQL数据库查询数据实例-W3CAPI 在线教程

HTML5 Web SQL数据库简介

什么是 HTML5 Web SQL数据库？

概念：Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作 Web客户端数据库的 API。SQL是结构化查询语言，专门用于关系型数据库的数据操作；

如何理解：如果我们在之前大学的时候学习过数据库原理或者数据库系统，那么我们可以很轻松的了解数据库的作用和使用方法，如果没有学习过这方面知识的开发者，我们可以不必要太重要对一些概念的理解，主要还是要“注重实战”，以“问题驱动”为主。

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

数据库顾名思义就是存储数据的仓库，对于很少的数据，那我们没必要把它放到仓库中，只需要将它放到 cookie 或者 localStorage 和 sessionStorage 中即可，如果对于很多的数据，而我们又需要根据不同条件去查找的时候，就需要使用到数据库了，因为数据库系统的设计可以让我们很轻松的根据各种条件去查询相应的数据。

其实数据库系统说到底主要是为了要解决数据的存储和数据的查询功能，类似我们现实世界中仓库一样，在存储各种实物的同时也要考虑如何快速定位的去提取实物。

HTML5 Web SQL 数据库浏览器支持及兼容

Web SQL 数据库可以在最新版的 Safari、Chrome 和 Opera 浏览器中工作。对于IE等其他浏览器还没支持到 Web SQL，我们需要在页面中判断当前浏览器是否支持，代码如下：

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

HTML5 Web SQL数据库使用方法及步骤

了解了 HTML5 Web SQL数据库的一些基础概念后，我们就要去了解如何使用它了；HTML5 Web SQL 给我们提供了支持SQL操作的几个核心方法，以下是规范中定义的三个核心方法：

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

在日常开发中我们可以按照如下步骤使用 HTML5 Web SQL：

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

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

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

openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库。

openDatabase() 方法对应的五个参数说明：

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

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

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

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

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

在开启事务后，我们可以使用数据库对象的 executeSql()方法来执行各种sql语句（增删改查，只要符合sql语句的标准语法即可），如上代码为创建一个user表，如果当前数据库中不存在则创建。

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语句执行错误，则回调此函数