HTML5-Web SQL Database

浏览数：18 / 时间：2015年06月12日

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

在这其中，一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。在HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以就像访问本地文件那样轻松的对内置的数据库进行直接访问。现在，像这种不需要存储在服务器上的，被称为“SQLite”的文件型SQL数据库已经得到了很广泛的利用，所以HTML5中也采用了这种数据库来作为本地数据库。

三个核心方法

1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。

2、transaction：这个方法允许我们根据情况控制事务提交或回滚。

3、executeSql：这个方法用于执行真实的SQL查询。

打开数据库

openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库，创建并打开数据库的语法如下：

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

五个参数：

数据库名（mydb）
版本号（1.0）
描述（Test DB）
数据库大小（2*1024*1024）
创建回调

最后一个，即第五个参数创建回调，在创建数据库时会调用它，但即使没有这个参数，一样可以在运行时创建数据库。

执行查询

执行查询使用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)‘);
});

上面的查询将会在数据库中创建一个LOGS表

插入操作

为了向表中插入新记录，我们在上面的查询语句中添加了一个简单的SQL查询，修改后的语句如下：

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, "foobar")‘);
   tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, "logmsg")‘);
});

在插入新纪录时，我们还可以传递动态值，如：

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是外部变量

读操作

如果要读取已经存在的记录，我们使用一个回调捕获结果，代码如下：

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, "foobar")‘);
   tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, "logmsg")‘);
});
db.transaction(function (tx) {
   tx.executeSql(‘SELECT * FROM LOGS‘, [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "<p>Found rows: " + len + "</p>";
   document.querySelector(‘#status‘).innerHTML +=  msg;
   for (i = 0; i < len; i++){
      alert(results.rows.item(i).log );
   }
 }, null);
});

完整的例子

最后，一个完整的HTML5文档中展现前面讲述的内容，同时使用浏览器来解析这个HTML5文档。

<!DOCTYPE HTML>
<html>
<head>
<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, "foobar")‘);
  tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, "logmsg")‘);
  msg = ‘<p>Log message created and row inserted.</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>Found rows: " + 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">Status Message</div>
</body>
</html>

原文出处：

http://baike.baidu.com/link?url=HegPhGCsMxAIaloDG9rr547snIi9apQ7EIZwyfCoMuBb2OomXTM3ZzLB6ESyIcAouZ9IOUPtBDzvZdTUt43bs_

http://www.tutorialspoint.com/html5/html5_web_sql.htm

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML5-Web SQL Database