Html5教程

HTML5 Web SQL 数据库

HTML5 应用程序缓存►◄HTML5 Web 存储

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',2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executesql('CREATE TABLE IF NOT EXISTS logs (id unique,log)');
});

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

插入数据

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

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

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

var db = openDatabase('ysdb',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',2 * 1024 * 1024);
 
db.transaction(function (tx) {
   tx.executesql('CREATE TABLE IF NOT EXISTS logs (id unique,"www.F2er.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',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,"简单编程")');
    tx.executesql('INSERT INTO logs (id,"www.F2er.com")');
    msg = '<p>数据表已创建，且插入了两条数据</p>';
    document.querySelector('#status').innerHTML =  msg;
});
 
db.transaction(function (tx) {
tx.executesql('SELECT * FROM logs',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=\'F2er.com\' WHERE id=2');
});

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

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

完整范例

var db = openDatabase('ysdb',2 * 1024 * 1024);
var msg;
 
 db.transaction(function (tx) {
    tx.executesql('CREATE TABLE IF NOT EXISTS logs (id unique,"www.F2er.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=\'F2er.com\' WHERE id=2');
      msg = '<p>更新 id 为 2 的记录。</p>';
      document.querySelector('#status').innerHTML =  msg;
 });
 
 db.transaction(function (tx) {
    tx.executesql('SELECT * FROM logs',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);
 });

HTML5 应用程序缓存►◄HTML5 Web 存储