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. 你知道的和不知道的sass

    关于sass,大多数人的认识一个写css的工具而已 其实就是的 但是这个工具的威力你发挥了多少呢... 以下全部都是干货,希望你能用在自己的项目里 定义集合 我们通常是这么定义变量的 $warning ...

  2. jeecms v9修改后台访问地址

    将jeeadmin/jeecms/index.do 改为admin/index.do为例 修改WebContent\WEB-INF\web.xml <servlet-mapping> &l ...

  3. js 实现页面局部（或图片）放大功能(vue)

    方法: adjustStart1 (e) { e.preventDefault() let event = e.touches if (event.length === 2) { this.style ...

  4. selenium 三种断言以及异常类型

    selenium 提供了三种模式的断言:assert .verify.waitfor Assert 失败时,该测试将终止. Verify 失败时,该测试将继续执行,并将错误记入日显示屏 .也就是说允许 ...

  5. Java超简明入门学习笔记（二）

    Java编程思想第4版学习笔记(二) 第三章 操作符 & 第四章 控制执行流程(流程控制语句)         第三章和第四章的内容主要是讲操作符和流程控制语句,Java的大多数操作符和流程控 ...

  6. vue使用远程在线更新代码

    一.main.js import Vue from 'vue' import App from './App' import router from './router' import Vuex fr ...

  7. 廖雪峰Java10加密与安全-6数字证书-1数字证书

    数字证书: 非对称加密算法:对数据进行加密/解密 签名算法:确保数据完整性和抗否认性 摘要算法:确保证书本身没有被篡改

  8. UOJ261 【NOIP2016】天天爱跑步 LCA+动态开点线段树

    UOJ261 [NOIP2016]天天爱跑步 Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.天天爱跑步是一个养成类游戏,需要玩家每天按时上线, ...

  9. new运算符与malloc函数（还需要修改）

    细说new与malloc的10点区别 C++ 自由存储区是否等价于堆? 浅谈new/delete和malloc/free的用法与区别 new和malloc都是在对上开辟内存,但尽量使用new. 使用m ...

  10. C++标准输入问题

    1.读取数据量不定的输入数据 e.g. #include <iostream> using namespace std; void main() { ,val=; while(cin> ...