W3CAPI 在线教程 | 菜鸟教程_LOGO
文档目录
文档目录
我的书签
 

HTML

HTML 5 基础教程

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

W3CAPI
1
2020-06-15 06:59:35

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() 方法对应的五个参数说明:
  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)');
});
在开启事务后,我们可以使用数据库对象的 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创建和插入语句,这个函数一共有四个参数:
  1. sqlStatement:表示一个sql语句字符串
  2. arguments:表示一个要动态绑定到sql语句中的数据列表,需要在sql语句中使用占位符来配合实现
  3. callback:表示一个结果回调函数,如果sql语句执行成功,则回调此函数
  4. errorCallback:表示一个错误的回调,如果sql语句执行错误,则回调此函数

HTML5 Web 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/>";
});
执行一下 
 
可以看到,我们要想获取查询的结果使用到了 executeSql函数 的第二个参数(结果回调函数),在这个回调函数中,有两个参数:第一个参数是用来执行sql语句的事务对象本身;第二个参数是执行的结果集对象 SQLResultSet,它的定义如下:
interface SQLResultSet {
    insertId: number;
    rowsAffected: number;
    rows: SQLResultSetRowList;
}
通过定义可以看出来,它包含了三个成员,它们的含义如下:
  • insertId:如果 SQLResultSet对象 的 sql 语句插入到数据库中,则 insertid 属性必须返回该行的行 id。 如果该语句插入了多行,则最后一行的 id 必须是返回。如果该语句没有插入一行,则该属性必须引发 INVALID_ACCESS_ERR 异常。
  • rowsAffected:rowsaffected 属性必须返回被 sql 语句更改的行数。 如果该语句没有影响任何行,则该属性必须返回零。 对于“ select”语句,这将返回零(查询数据库不会影响任何行)。
  • rows:rows 属性必须按照数据库返回的顺序返回一个 SQLResultSetRowList对象,表示返回的行数据集合。 每次都必须返回相同的对象。 如果没有返回行,那么对象将为空(其长度为零)

HTML5 Web SQL数据库 删除和更新数据 操作实例

我们学会了在 Web SQL中增加数据并通过各种条件来查询数据,那么肯定还要学习删除和更新数据,如何更新和删除数据呢?其实也是通过 executeSql函数来实现的。

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

//直接指定删除条件
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/>";
});
执行一下
相关提问
敬请期待