首页文章资源工具教程 栏目
HTML5 教程HTML5 浏览器支持HTML5 新元素HTML5 Video 视频HTML 5 Video + DOMHTML5 Audio 音频HTML5 拖放 ( drag 和 drop )HTML5 Canvas画布HTML5 内联 SVGHTML5 MathML 数学公式HTML5 Geolocation 地理定位HTML5 新的 Input 类型HTML5 表单元素HTML5 表单属性HTML5 语义元素HTML5 Web 存储HTML5 Web SQL 数据库HTML5 应用程序缓存HTML5 Web WorkersHTML 5 服务器发送事件HTML5 WebSocketHTML5 历史记录APIHTML 5 代码规范HTML5 Canvas 描边和填充HTML5 Canvas 绘制矩形HTML5 Canvas 清除画布HTML5 Canvas 路径HTML5 Canvas 渐变HTML5 Canvas 阴影HTML5 Canvas 绘制文本HTML5 Canvas 绘制图像HTML5 Canvas 合成HTML5 Canvas 状态HTML5 Canvas toDataURL()HTML5 Canvas 像素处理HTML5 Canvas 制作动画HTML5 Canvas 转换

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具，网友无需注册和下载安装即可使用

点击查看

HTML5 Web SQL 数据库

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


Web SQL 核心方法

下表列出了在 Web SQL 规范中定义的三个核心方法

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

打开数据库

方法 openDatabase() 用来打开一个数据库

如果数据库不存在，则会创建一个新的数据库

使用方法

var db = openDatabase('ysdb', '1.0', 'My first DB', 2 * 1024 * 1024,function(){});

参数说明

参数说明
'ysDB'数据库名称
'1.0'版本号
'My first DB '描述文本
'2 * 1024 * 1024'数据库大小
func创建回调，回调函数会在创建数据库后被调用

执行查询操作

方法 database.transaction() 用来执行一个事物查询操作

var db = openDatabase('ysdb', '1.0', 'My first DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS logs (id unique, log)');
});

上面的范例执行后会在 'ysdb' 数据库中创建一个名为 logs 的表


插入数据

创建了数据库后，我们可以使用下面的语句插入一些数据

var db = openDatabase('ysdb', '1.0', 'My first 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.fly63.com")');
});

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

var db = openDatabase('ysdb', '1.0', 'My first 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('ysdb', '1.0', 'My first 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.fly63.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('ysdb', '1.0', 'My first 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.fly63.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);
});


删除记录

我们可以使用下面的语句来删除记录

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=\'fly63.com\' WHERE id=2');
});

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

db.transaction(function(tx) {
    tx.executeSql('UPDATE logs SET log=\'fly63.com\' WHERE id=?', [id]);
});


完整范例

var db = openDatabase('ysdb', '1.0', 'My first 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.fly63.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=\'fly63.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);
 });

链接: https://fly63.com/course/2_51

HTML5 应用程序缓存 >>