HTML5 Web SQL 数据库总结

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

如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

核心方法

以下是规范中定义的三个核心方法：

  1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
  2. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
  3. executeSql：这个方法用于执行实际的 SQL 查询。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>javascript</title>
 6     <style type="text/css">
 7 
 8     </style>
 9 </head>
10 <body>
11 <div id="status" name="status">状态信息</div>
12 </body>
13 </html>
14 <script type="text/javascript">
15     /*
16     *openDatabase：使用现有的数据库或者新建的数据库创建一个数据库对象
17     *openDatabase方法对应的五个参数说明：1 数据库名称  2 版本号 3 描述文本 4 数据库大小 5 创建回调(创建回调会在创建数据库后被调用)
18     * */
19     var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
20     var msg;
21     /*
22     * transaction这个方法让我们能够控制一个事物,以及基于这种情况执行提交或者回滚。
23     * executeSql这个方法用于执行实际的SQL查询。
24     * 语句执行后会在mydb数据库中创建一个名为LOGS的表。
25     * */
26     db.transaction(function (tx) {
27         tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS1 (id unique, log)');
28         tx.executeSql('INSERT INTO LOGS1 (id, log) VALUES (1, "nihao1")');//插入数据
29         tx.executeSql('INSERT INTO LOGS1 (id, log) VALUES (2, "nihao2")');//插入数据
30         msg = '<p>数据表已创建，且插入了两条数据。</p>';
31         document.querySelector('#status').innerHTML =  msg;
32     });
33 
34     /*
35     * 如何读取数据库中已经存在的数据
36     * */
37     db.transaction(function (tx) {
38         tx.executeSql('SELECT * FROM LOGS1', [], function (tx, results) {
39             var len = results.rows.length, i;
40             msg = "<p>查询记录条数: " + len + "</p>";
41             document.querySelector('#status').innerHTML +=  msg;
42 
43             for (i = 0; i < len; i++){
44                 msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
45                 document.querySelector('#status').innerHTML +=  msg;
46             }
47         }, null);
48     });
49 </script>

 效果截图：

             

posted @ 2016-06-29 17:43  SkyTeam_LBM  阅读(240)  评论(0)  编辑  收藏  举报