文档章节

HTML5 Web SQL 数据库

不负好时光
 不负好时光
发布于 10/08 14:58
字数 1146
阅读 25
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

HTML5 Web SQL 数据库

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

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

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

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


核心方法

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

  1. openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
  2. transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
  3. executeSql:这个方法用于执行实际的 SQL 查询。

打开数据库

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

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

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

  1. 数据库名称
  2. 版本号
  3. 描述文本
  4. 数据库大小
  5. 创建回调

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


执行查询操作

执行操作使用 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, "菜鸟教程")');
   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]);
});

实例中的 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, "菜鸟教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.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);
});

完整实例

实例

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

以上实例运行结果如下图所示:

img


删除记录

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

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]);
});

完整实例

实例

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=\'www.w3cschool.cc\' 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);
 });

以上实例运行结果如下图所示:

img

本文转载自:https://www.runoob.com/html/html5-web-sql.html

不负好时光
粉丝 22
博文 213
码字总数 103516
作品 0
徐汇
程序员
私信 提问
[IBM DW] 使用 HTML5 开发离线应用

简介: Web2.0 技术鼓励个人的参与,每个人都是 Web 内容的撰写者。如果 Web 应用能够提供离线的功能,让用户在没有网络的地方(例如飞机上)和时候(网络坏了),也能进行内容撰写,等到有网...

红薯
2010/11/28
749
2
HTML5-Web SQL Database

在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序的性能,减轻了服务器端的负担,使Web时...

iNiL0119
2015/03/22
250
0
9 个用来加速 HTML5 应用的方法

Web 开发者经常在找一些新的方法来不断的提升页面的速度和性能,而 HTML5 的很多新特性可以实现,让用户有着更好的体验,在这里我们整理了 9 中简单易于实现的 HTML5 技巧,或许可以对你有所...

彭博
2012/11/27
235
0
9 个用来加速 HTML5 应用的方法

Web 开发者经常在找一些新的方法来不断的提升页面的速度和性能,而 HTML5 的很多新特性可以实现,让用户有着更好的体验,在这里我们整理了 9 中简单易于实现的 HTML5 技巧,或许可以对你有所...

红薯
2012/03/22
5.9K
11
浏览器存储及使用

伴随着WEB的发展,浏览器的存储方式及技术不断的发生更改,从刚开始的cookie,到localstorage,sessionStorage,再到IndexedDB,再到现在的Web SQL,作为一名合格的前端开发,当然需要对这些...

力谱宿云
2016/04/21
218
0

没有更多内容

加载失败,请刷新页面

加载更多

thinkphp6 视图变量输出

thinkphp6 视图变量输出 视图默认把变量输出为字符串类型,有些时候需要保证原来的类型,比如html字符串 raw参数,禁止转换 {$content.content|raw} 支持多个参数,比如解码php内置的htmlspe...

DrChenXX
7分钟前
2
0
【搞定Jvm面试】 Java 内存区域揭秘附常见面试题解析

本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb (【Java学习+面试指南】 一份涵盖大部分Java程序员所需要掌握的核心知识)如果觉得不错的还,不妨去点个Star,鼓励一下!...

SnailClimb
17分钟前
2
0
jQuery如何根据数据属性值查找元素?

我有以下场景: var el = 'li'; 页面上有5个<li> ,每个都有一个data-slide=number属性(数字分别为1,2,3,4,5) 。 我现在需要找到当前活动的幻灯片编号,该编号映射到var current = $('ul...

javail
29分钟前
3
0
LaTeX自定义宏包、类文件的默认搜索路径设置方法

  对于自定义的LaTeX宏包与类,在调用时可以通过在命令\documentclass{}与\usepackage{}命令中指定完整路径或者相对路径,这样确实可以调用,但是编译时总是有烦人的警告信息,让人不爽。还...

陆巍_
31分钟前
3
0
计算机电子书 2018 BiliDrive 备份

下载方式 根据你的操作系统下载不同的 BiliDrive 二进制。 执行: bilidrive download <link> 链接 <!--more--> 文档 链接 Webpack 中文指南.epub (409.01 KB) bdrive://ce58b7b58292296a61......

ApacheCN_飞龙
52分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部