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

核心方法

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

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)');

});

插入数据

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, "菜鸟教程")');

   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.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]);

});


<!DOCTYPE HTML>

<html>

   <head>

      <meta charset="UTF-8">

      <title></title> 

      <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, "菜鸟教程")');

            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.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>



删除记录

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.w3cschool.cc\' WHERE id=2');

});

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

db.transaction(function(tx) {

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

});


<!DOCTYPE HTML>

<html>

   <head>

      <meta charset="UTF-8">

	   <title>菜鸟教程(runoob.com)</title> 

      <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, "菜鸟教程")');

            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.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=\'runoob.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>



本文查看自：https://www.runoob.com/html/html5-web-sql.html

有趣的HTML5 Web SQL 数据库的更多相关文章

  1. HTML5: HTML5 Web SQL 数据库

    ylbtech-HTML5: HTML5 Web SQL 数据库 1.返回顶部 1. HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个 ...

  2. HTML5 Web SQL 数据库操作

    Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 以下是规范中定义的三个核心方法: openDataba ...

  3. HTML5 Web SQL 数据库总结

    Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 Web 后端程序员,应该很容易理解 SQ ...

  4. HTML5 Web SQL 数据库

    呼和浩特seo:Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 Web 后端程序员,应该 ...

  5. HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket

    web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...

  6. Web SQL数据库

    Web SQL数据库:它是一个独立的规范,引入了一组使用SQL操作客户端数据库的API. openDatabase方法:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象.如果数据库存在,op ...

  7. HTML5 Web SQL Database 数据库的使用方法【图文说明】

    页面代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  8. （二）HTML5 - Web SQL 本地数据库

    简介 WEB SQL Database即本地的SQLite数据库,使用的方式和方法和SQLite基本相同 判断浏览器是否支持 if (!window.openDatabase) { alert('Da ...

  9. 有趣的HTML5 Web 存储

    HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...

随机推荐

  1. 菜鸟nginx源码剖析数据结构篇（九） 内存池ngx_pool_t[转]

    菜鸟nginx源码剖析数据结构篇(九) 内存池ngx_pool_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csdn. ...

  2. CentOS 8上安装Docker

    前言 这几天,想玩玩docker,方便漏洞复现,我去学docker搭建了,感觉不错,挺方便的 安装步骤: 1.下载docker-ce的repo curl https://download.docker ...

  3. 如何提高Axure设计的效率 提高Axure设计效率的10条建议

    如何更有效率的使用axure,这是新手需要掌握的技能.本文作者从实际经验中归纳出来的十条建议十分值得学习,转载分享给大家: Axure 是创建软件原型的快速有力的工具.上手很容易,但是,其中存在一个危 ...

  4. 重装一次CM的坑爹记录

    今天同事要对测试环境进行降级(测试高于生产所以要求降级),自己不经常搞运维,但是无奈测试环境没运维管理只能自己上了. 流程和遇到问题按数字表示. 1.重装CM(clouder manager)这个过程 ...

  5. Leetcode 125.验证回文字符串(Python3)

    题目: 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, a plan, ...

  6. [编织消息框架][netty源码分析]5 EventLoopGroup 实现类NioEventLoopGroup职责与实现

    分析NioEventLoopGroup最主有两个疑问 1.next work如何分配NioEventLoop 2.boss group 与child group 是如何协作运行的 从EventLoop ...

  7. 双系统可以进入Windows但进入Ubuntu时无法进入系统引导，只有左上角光标闪

    双系统可以进入Windows但进入Ubuntu时无法进入系统引导,只有左上角光标闪 这时候可以进入windows下的easyBCD重新创建ubuntu引导项即可

  8. 编写一个函数isMerge，判断一个字符串str是否可以由其他两个字符串part1和part2“组合”而成

    编写一个函数isMerge,判断一个字符串str是否可以由其他两个字符串part1和part2“组合”而成.“组合 ”的规则如下: 1). str中的每个字母要么来自于part1,要么来自于part2 ...

  9. 「EJOI2017」-骆驼

    第一道构造题祭…… 文字叙述: 题目的提示很明显. $N$是$5$的倍数,所以考虑分成$5 \times 5$小块连在一起. 首先通过打表证明, 小块里从任何一点出发,经过所有的格,从任一一点跳出,一 ...

  10. spring cloud深入学习(十一)-----服务网关zuul

    前面的文章我们介绍了,Eureka用于服务的注册于发现,Feign支持服务的调用以及均衡负载,Hystrix处理服务的熔断防止故障扩散,Spring Cloud Config服务集群配置中心,似乎一个 ...