当前位置 : IT培训网 > Web前端 > Web教程 > 如何学习HTML5 Web SQL 数据库

如何学习HTML5 Web SQL 数据库

时间:2016-12-09 15:12:35  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
这方面的知识不难,重点在于有没有人领着你学习,如果能在学习前报读一个培训班,相信大家都可以在短短的4个月成为HTML5方面的设计高手,好了,无论你是否看得懂这方面的知识,既然决定学习了,就来IT培训网了解下吧!

数据库是什么呢,对于没有接触过后端设计的人来说比较难吧,一般的网页设计很难用到数据库,更不用说用网页直接连接数据库了。那么初学者该如何学习HTML5 web sql数据库呢,这方面知识难吗!

HTML5 Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。

如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。

你也可以参考我们的 SQL 教程,了解更多数据库操作知识。

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

核心方法

以下是规范中定义的三个核心方法:

openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。

executeSql:这个方法用于执行实际的 SQL 查询。

打开数据库

我们可以使用 openDatabase() 方法来打开已存在的数据库,如果数据库不存在,则会创建一个新的数据库,使用代码如下:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

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

数据库名称

版本号

描述文本

数据库大小

创建回调

第五个参数,创建回调会在创建数据库后被调用。

执行查询操作

执行操作使用 database.transaction() 函数:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) { 

   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

});

上面的语句执行后会在 'mydb' 数据库中创建一个名为 LOGS 的表。

插入数据

在执行上面的创建表语句后,我们可以插入一些数据:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {

   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "IT培训网")');

   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.www.alisonhorn.com")');

});

我们也可以使用动态值来插入数据:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) { 

  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

  tx.executeSql('INSERT INTO LOGS

                        (id,log) VALUES (?, ?'), [e_id, e_log];

});

实例中的 e_id 和 e_log 是外部变量,executeSql 会映射数组参数中的每个条目给 "?"。

读取数据

以下实例演示了如何读取数据库中已经存在的数据:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {

   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "IT培训网")');

   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.www.alisonhorn.com")');

});

db.transaction(function (tx) {

   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {

      var len = results.rows.length, i;

      msg = "<p>查询记录条数: " + len + "</p>";

      document.querySelector('#status').innerHTML +=  msg;

      for (i = 0; i < len; i++){

         alert(results.rows.item(i).log );

      }

   }, null);

});

源代码:

<!DOCTYPE HTML>

<html>

   <head>

      <script type="text/javascript">

         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

         var msg;

                           

         db.transaction(function (tx) {

            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "IT培训网")');

            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.www.alisonhorn.com")');

            msg = '<p>数据表已创建,且插入了两条数据。</p>';

            document.querySelector('#status').innerHTML =  msg;

         });

         db.transaction(function (tx) {

            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {

               var len = results.rows.length, i;

               msg = "<p>查询记录条数: " + len + "</p>";

               document.querySelector('#status').innerHTML +=  msg;

                                              

               for (i = 0; i < len; i++){

                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";

                  document.querySelector('#status').innerHTML +=  msg;

               }

            }, null);

         });

      </script>

   </head>

   <body>

      <div id="status" name="status">状态信息</div>

   </body>

</html>

运行结果:

数据表已创建,且插入了两条数据。

查询记录条数: 2

IT培训网

www.www.alisonhorn.com

删除记录

删除记录使用的格式如下:

db.transaction(function (tx) {

    tx.executeSql('DELETE FROM LOGS  WHERE id=1');

});

删除指定的数据id也可以是动态的:

db.transaction(function(tx) {

    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);

});

更新记录

更新记录使用的格式如下:

db.transaction(function (tx) {

    tx.executeSql('UPDATE LOGS SET log=\'www.alisonhorn.com\' WHERE id=2');

});

更新指定的数据id也可以是动态的:

db.transaction(function(tx) {

    tx.executeSql('UPDATE LOGS SET log=\'www.alisonhorn.com\' WHERE id=?', [id]);

});

源代码:

<!DOCTYPE HTML>

<html>

   <head>

      <meta charset="UTF-8"> 

      <script type="text/javascript">

         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

         var msg;

         db.transaction(function (tx) {

            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "IT培训网")');

            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.www.alisonhorn.com")');

            msg = '<p>数据表已创建,且插入了两条数据。</p>';

            document.querySelector('#status').innerHTML =  msg;

         });

         db.transaction(function (tx) {

              tx.executeSql('DELETE FROM LOGS  WHERE id=1');

              msg = '<p>删除 id 为 1 的记录。</p>';

              document.querySelector('#status').innerHTML =  msg;

         });

         db.transaction(function (tx) {

             tx.executeSql('UPDATE LOGS SET log=\'www.alisonhorn.com\' WHERE id=2');

              msg = '<p>更新 id 为 2 的记录。</p>';

              document.querySelector('#status').innerHTML =  msg;

         });

         db.transaction(function (tx) {

            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {

               var len = results.rows.length, i;

               msg = "<p>查询记录条数: " + len + "</p>";

               document.querySelector('#status').innerHTML +=  msg;

               

               for (i = 0; i < len; i++){

                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";

                  document.querySelector('#status').innerHTML +=  msg;

               }

            }, null);

         });

      </script>

   </head>

   <body>

      <div id="status" name="status">状态信息</div>

   </body>

</html>

运行结果:

更新 id 为 2 的记录。

查询记录条数: 1

www.alisonhorn.com

这方面的知识不难,重点在于有没有人领着你学习,如果能在学习前报读一个培训班,相信大家都可以在短短的4个月成为HTML5方面的设计高手,好了,无论你是否看得懂这方面的知识,既然决定学习了,就来IT培训网了解下吧!

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频(Videos)播放