web SQL 的使用（转）

<script>
        function initDatabase()
        {
            var db = getCurrentDb();//初始化数据库
            if (!db)
            {
                alert("您的浏览器不支持HTML5本地数据库");
                return;
            }
            db.transaction(function (trans) {//启动一个事务，并设置回调函数
                //执行创建表的SQL脚本
                trans.executeSql("create table if not exists Demo(uName text null,title text null, word text null)",[],
                    function (trans,result) { },
                    function (trans, message) {//消息的回调函数
                        alert(message);
                    });
            })
        }

        function getCurrentDb()
        {
            //打开数据库，不存在就创建：数据库名称，版本，概述，大小
            var db = openDatabase("mydb", "1.0", "", 1024 * 1024);
            return db;
        }

        //显示所有数据到页面上
        function showAllTheData()
        {
            $("#tblData").empty;
            var db = getCurrentDb();
            db.transaction(function (trans) {
                trans.executeSql("SELECT * FROM Demo", [], function (ts, data) {
                    if (data)
                    {
                        for (var i = 0; i < data.rows.length; i++) {
                            appendDataToTable(data.rows.item(i));//获取某行数据的json对象
                        }
                    }
                }, function (ts, message) { alert(message); var tst = message;});
            });
        }

        function appendDataToTable(data) {//将数据展示到表格里面
            var txtName = data.uName;
            var txtTitle = data.title;
            var word = data.word;
            var strHtml = "";
            strHtml += "<tr>";
            strHtml += "<td>" + txtName + "</td>";
            strHtml += "<td>" + txtTitle + "</td>";
            strHtml += "<td>" + word + "</td>";
            strHtml += "</tr>";
            $("#tblData").append(strHtml);
        }

        $(function () {
            alert(111);
            initDatabase();
            $("#btnSave").click(function () {
                var txtName = $("#txtName").val();
                var txtTitle = $("#txtTitle").val();
                var txtWords = $("#txtWords").val();
                var db = getCurrentDb();
                //执行SQL脚本，插入数据
                db.transaction(function (trans) {
                    trans.executeSql("insert into Demo(uName,title,word) values(?,?,?)",
                        [txtName, txtTitle, txtWords], function (ts, data) { },
                        function (ts, message) {
                            alert(message)
                        });
                });
                showAllTheData();
            });
        });
    </script>

<table>
        <tr>
            <td>用户名：</td><td><input type="text" name="txtName" id="txtName" required/></td>
        </tr>
        <tr>
            <td>标题：</td><td><input type="text" name="txtTitle" id="txtTitle" required/></td>
        </tr>
        <tr>
            <td>留言：</td><td><input type="text" name="txtWords" id="txtWords"/></td>
        </tr>
    </table>
    <input type="button" value="保存" id="btnSave"/>
    <hr />
    <input type="button" value="展示所有数据" onclick="showAllTheData();"/>
    <table id="tblData"></table>