本地資料庫是html5新特性嗎

本地資料庫是html5新特性。Html5提供了一個瀏覽器端的資料庫支援，允許開發者直接通JS的API在瀏覽器端建立一個原生的資料庫，而且支援標準的SQL的CRUD操作，讓離線的Web應用更加方便的儲存結構化的資料。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

雖然Html5已經提供了功能強大的localStorage和sessionStorage，但是他們兩個都只能提供儲存簡單資料結構的資料，對於複雜的Web應用的資料卻無能為力。逆天的是Html5提供了一個瀏覽器端的資料庫支援，允許我們直接通JS的API在瀏覽器端建立一個原生的資料庫，而且支援標準的SQL的CRUD操作，讓離線的Web應用更加方便的儲存結構化的資料。接下里介紹一下本地資料的相關API和用法。

操作本地資料庫的最基本的步驟是：

第一步：openDatabase方法：建立一個存取資料庫的物件。
第二步：使用第一步建立的資料庫存取物件來執行transaction方法，通過此方法可以設定一個開啟事務成功的事件響應方法，在事件響應方法中可以執行SQL.
第三步：通過executeSql方法執行查詢，當然查詢可以是：CRUD。

接下來分別介紹一下相關的方法的引數和用法。

（1）openDatabase方法：

//Demo：獲取或者建立一個資料庫，如果資料庫不存在那麼建立之
var dataBase = openDatabase("student", "1.0", "學生表", 1024 * 1024, function () { });

openDatabase方法開啟一個已經存在的資料庫，如果資料庫不存在，它還可以建立資料庫。幾個引數意義分別是：

1，資料庫名稱。
2，資料庫的版本號，目前來說傳個1.0就可以了，當然可以不填；
3，對資料庫的描述。
4，設定分配的資料庫的大小（單位是kb）。
5，回撥函數(可省略)。
初次呼叫時建立資料庫，以後就是建立連線了。

（2）db.transaction方法可以設定一個回撥函數，此函數可以接受一個引數就是我們開啟的事務的物件。然後通過此物件可以進行執行Sql指令碼，跟下面的步驟可以結合起來。

（3）通過executeSql方法執行查詢。

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

引數說明：

qlQuery：需要具體執行的sql語句，可以是create、select、update、delete；
value1,value2..]：sql語句中所有使用到的引數的陣列，在executeSql方法中，將s>語句中所要使用的引數先用「?」代替，然後依次將這些引陣列成陣列放在第二個引數中
ataHandler：執行成功是呼叫的回撥函數，通過該函數可以獲得查詢結果集；
4,errorHandler：執行失敗時呼叫的回撥函數；

下面是一個綜合的例子，可以看一下：

<head>
 <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        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,words text null)", [], function (trans, result) {
                }, function (trans, message) {//訊息的回撥函數alert(message);});
            }, function (trans, result) {
            }, function (trans, message) {
            });
        }
        $(function () {//頁面載入完成後繫結頁面按鈕的點選事件
            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,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
                    }, function (ts, message) {
                        alert(message);
                    });
                });
                showAllTheData();
            });
        });
        function getCurrentDb() {
            //開啟資料庫，或者直接連線資料庫引數：資料庫名稱，版本，概述，大小
            //如果資料庫不存在那麼建立之
            var db = openDatabase("myDb", "1.0", "it's to save demo data!", 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) {//將資料展示到表格裡面
            //uName,title,words
            var txtName = data.uName;
            var txtTitle = data.title;
            var words = data.words;
            var strHtml = "";
            strHtml += "<tr>";
            strHtml += "<td>"+txtName+"</td>";
            strHtml += "<td>" + txtTitle + "</td>";
            strHtml += "<td>" + words + "</td>";
            strHtml += "</tr>";
            $("#tblData").append(strHtml);
        }
    </script>
</head>
    <body>
        <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" required/></td>
            </tr>
        </table>
        <input type="button" value="儲存" id="btnSave"/>
        <hr/>
        <input type="button" value="展示所喲資料" onclick="showAllTheData();"/>
        <table id="tblData">
        </table>
    </body>
</html>

執行的效果如圖：