Web API 并不是 html5 规范的一部分，它是独立的规范，引入了一组使用 操作客户端的 APIs

Web 核心

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

打开

 openDatabase() 用来打开

如果不存在，则会创建新的

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

执行操作

 database.transaction() 用来执行事物操作

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

上面的范例执行后会在 'ysdb' 中创建名为 logs 的表

插入数据

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

var db = openDatabase('ysdb',2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.execute('CREATE TABLE IF NOT EXISTS logs (id unique,log)');
   tx.execute('INSERT INTO logs (id,log) VALUES (1,"简单编程")');
   tx.execute('INSERT INTO logs (id,log) VALUES (2,"www.F2er.com")');
});

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

var db = openDatabase('ysdb',2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.execute('CREATE TABLE IF NOT EXISTS logs (id unique,log)');
  tx.execute('INSERT INTO logs (id,log) VALUES (?,?)',[e_id,e_log]);
});

范例中的 e_id 和 e_log 是外部变量，execute 会映射数组参数中的每个条目给 "?"

读取数据

我们可以使用下面的语句从读取中已经存在的数据

var db = openDatabase('ysdb',2 * 1024 * 1024);

db.transaction(function (tx) {
   tx.execute('CREATE TABLE IF NOT EXISTS logs (id unique,"www.F2er.com")');
});

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

db.transaction(function (tx) {
tx.execute('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.execute('DELETE FROM logs  WHERE id=1');
});

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

db.transaction(function(tx) {
    tx.execute('DELETE FROM logs WHERE id=?',[id]);
});

更新记录

我们可以使用下面的语句来更新记录

db.transaction(function (tx) {
    tx.execute('UPDATE logs SET log=\'F2er.com\' WHERE id=2');
});

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

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

完整范例

var db = openDatabase('ysdb',2 * 1024 * 1024);
var msg;

 db.transaction(function (tx) {
    tx.execute('CREATE TABLE IF NOT EXISTS logs (id unique,"www.F2er.com")');
    msg = '<p>数据表已创建，且插入了两条数据。</p>';
    document.querySelector('#status').innerHTML =  msg;
 });

 db.transaction(function (tx) {
      tx.execute('DELETE FROM logs  WHERE id=1');
      msg = '<p> id 为 1 的记录。</p>';
      document.querySelector('#status').innerHTML =  msg;
 });

 db.transaction(function (tx) {
     tx.execute('UPDATE logs SET log=\'F2er.com\' WHERE id=2');
      msg = '<p>更新 id 为 2 的记录。</p>';
      document.querySelector('#status').innerHTML =  msg;
 });

 db.transaction(function (tx) {
    tx.execute('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);
 });