HTML5 Web SQL

绝地灬酷狼 2022-08-11 06:58 108阅读 0赞

原文：[http://www.cnblogs.com/chuncn/archive/2010/11/22/1884783.html][http_www.cnblogs.com_chuncn_archive_2010_11_22_1884783.html]

相关文章：[http://bbs.9ria.com/thread-241664-1-1.html][http_bbs.9ria.com_thread-241664-1-1.html]  |  [http://www.cnblogs.com/wzh2010/archive/2013/07/28/3220906.html][http_www.cnblogs.com_wzh2010_archive_2013_07_28_3220906.html]

Html5数据库API是以一个独立规范形式出现，它包含三个核心方法：

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

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

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

**　　打开数据库**

openDatabase方法可以打开已经存在的数据库，不存在则创建：

var db = openDatabase('mydatabase', '2.0', my db', 2 \* 1024);

openDatabasek中五个参数分别为：数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库。

**　　执行查询**

database.transaction()函数用来查询，下面将在mydatabase数据库中创建表t1：

var db = openDatabase(' mydatabase ', '1.0', 'Test DB', 2 \* 1024 \* 1024);    
   db.transaction(function (tx) \{      
      tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');    
   \});

**　　插入操作**

var db = openDatabase('mydatabase', '2.0', my db', 2 \* 1024);

db.transaction(function (tx) \{   
      tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');    
      tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');    
      tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');    
   \});

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

var db = openDatabase(' mydatabase ', '2.0', 'my db', 2 \* 1024);    
   db.transaction(function (tx) \{      
     tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');    
     tx.executeSql('INSERT INTO t1     
                           (id,log) VALUES (?, ?'), \[e\_id, e\_log\];  //e\_id和e\_log是外部变量  
   \});

**　 读操作**

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

**　　完整的例子**

<!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>

下面是在最新版本的Safari或Opera浏览器中产生的输出结果。

Log message created and row inserted.   
 Found rows: 2    
 foobar    
 logmsg

这里还有一个问题，如果多次刷新，db里的数据会越来越多，因为它每次都在执行插入数据的操作。

[http_www.cnblogs.com_chuncn_archive_2010_11_22_1884783.html]: http://www.cnblogs.com/chuncn/archive/2010/11/22/1884783.html
[http_bbs.9ria.com_thread-241664-1-1.html]: http://bbs.9ria.com/thread-241664-1-1.html
[http_www.cnblogs.com_wzh2010_archive_2013_07_28_3220906.html]: http://www.cnblogs.com/wzh2010/archive/2013/07/28/3220906.html