HTML5 基础（003_Web SQL Database_1）_web sql opendatabase is not defined-优快云博客

本文介绍了HTML5中的Web SQL数据库API，虽然已被废弃，但仍然展示了如何在客户端存储结构化数据并进行高效检索。通过示例代码，演示了如何使用openDatabase()、transaction()和executeSql()方法。请注意，此API在Firefox中不受支持，推荐使用Indexed Database API作为替代。

Web SQL 数据库：

Web SQL 数据库 API 并不是 HTML5 规范的一部分，它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
万维网联盟（W3C）已经不再对 Web SQL 数据库 API 这一规范进行维护，新的替代者为 Indexed Database API（稍后再讨论）。
客户端数据库的出现是为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。这样做的好处是大大提高了 Web 应用程序的性能，减轻了服务器端的负担，使 Web 时代重新回到了“客户端为重，服务器为轻”的时代。

示例代码：本示例使用了Bootstrap库，当然，Bootstrap库是依赖于jQuery库的，于是顺便复习了jQuery库中选择器、parents()、children()等方法，纯属练手。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web SQL Example</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div class="container">

        <!-- 文本行 -->
        <div class="row">
            <div class="col-md-12">
                <h1>
                    <p class="text-center">Hello world!</p>
                </h1>
            </div>
        </div>

        <!-- 表格行 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th><p class="text-center">NO</p></th>
                            <th><p class="text-center">USERNAME</p></th>
                            <th><p class="text-center">PASSWORD</p></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot><tr></tr></tfoot>
                </table>
            </div>
        </div>
    </div>

    <!-- jQuery库、Bootstrap库引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>

    <!-- 使用openDatabase()、transaction()、executeSql()等方法的示例代码 -->
    <script type="text/javascript">
        $(document).ready(function() {
            // 开启 Web SQL 数据库并创建 mydb 表（如果 mydb 表不存在）
            var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
            var msg; // 记录数据条数

            db.transaction(function(tx) {
                // 向 Web SQL 数据库中插入3条数据
                tx.executeSql('CREATE TABLE IF NOT EXISTS USER (id unique, username, password)');
                tx.executeSql('INSERT INTO USER (id, username, password) VALUES (1, "张三", "123456")');
                tx.executeSql('INSERT INTO USER (id, username, password) VALUES (2, "李四", "369369")');
                tx.executeSql('INSERT INTO USER (id, username, password) VALUES (3, "王五", "123123")');
            });

            db.transaction(function(tx) {
            // 查询 mydb 表中的数据
                tx.executeSql('SELECT * FROM USER', [], function (tx, results) {
                    var len = results.rows.length;
                    msg = "<p class='text-center'>查询记录条数: " + len + "</p>";
                    for (var i = 0; i < len; i++) {
                        $("table tbody").append("<tr id='"+results.rows.item(i).id+"'>"+
                                "<td>"+results.rows.item(i).id+"</td>"+
                                "<td>"+results.rows.item(i).username+"</td>"+
                                "<td>"+"<div class='col-md-10'>"+results.rows.item(i).password+"</div>"
                                      +"<div class='col-md-2'><p class='text-center'><button type='button' class='btn btn-primary btn-xs'>Delete</button></p></div>"
                                      +"</td>"+
                                "</tr>");
                    }

                    // 添加按钮事件（只是为了做删除数据的实验）
                    $("button").click(function(obj) {
                        db.transaction(function(tx) {
                             // 删除行数据
                             tx.executeSql('DELETE FROM USER WHERE id='+$(obj.target).parents("tr")[0].id);
                        });
                        $(obj.target).parents("tr").remove();
                        msg = "<p class='text-center'>查询记录条数: " + $("table tbody").children("tr").length + "</p>";
                        $("table tfoot tr td").remove();
                        $("table tfoot tr").append("<td></td><td></td><td>"+msg+"</td>");
                    });

                    $("table tfoot tr").append("<td></td><td></td><td>"+msg+"</td>");
                });
            });
        });
    </script>
</body>
</html>

备注：关于 openDatabase()、transaction()、executeSql() 等方法的定义以及参数说明均可在 W3C 的规范中找到。

官方文档

1.在 Bootstrap 中文网下载 bootstrap-3.3.0-dist.zip （http://v3.bootcss.com/），将其解压到本地目录。

2.在 ../dist 目录下新建一个文本文件，拷贝 示例代码 到文本文件中，修改文件的后缀名为 html ，文件名随意。在 Chromium（或Chrome）浏览器下运行该文件。

目录结构

运行结果：示例代码在 Chromium 浏览器中进行测试，版本 52.0.2743.116 Built on Ubuntu , running on Ubuntu 16.04 (64-bit)。

运行结果

开启 Chromium 浏览器的调试功能，在 Application 区域下可以看到 Web SQL 数据库引擎、mydb 数据库以及 USER 表：

运行结果

然而，本次 示例代码 在 Firefox 浏览器中运行是会报错的，报错信息为：openDatabase is not defined，即 openDatabase() 方法未定义，可见 Firefox 浏览器并不支持与 Web SQL 相关的规范，原因正如本文开头所言，万维网联盟（W3C）已经不再对 Web SQL 数据库 API 这一规范进行维护，新的替代者为 Indexed Database API。

在 Firefox 浏览器中的测试结果：

测试结果