站長(zhǎng)資訊網(wǎng)
本地?cái)?shù)據(jù)庫(kù)是html5新特性。Html5提供了一個(gè)瀏覽器端的數(shù)據(jù)庫(kù)支持，允許開(kāi)發(fā)者直接通JS的API在瀏覽器端創(chuàng)建一個(gè)本地的數(shù)據(jù)庫(kù)，而且支持標(biāo)準(zhǔn)的SQL的CRUD操作，讓離線的Web應(yīng)用更加方便的存儲(chǔ)結(jié)構(gòu)化的數(shù)據(jù)。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
雖然Html5已經(jīng)提供了功能強(qiáng)大的localStorage和sessionStorage，但是他們兩個(gè)都只能提供存儲(chǔ)簡(jiǎn)單數(shù)據(jù)結(jié)構(gòu)的數(shù)據(jù)，對(duì)于復(fù)雜的Web應(yīng)用的數(shù)據(jù)卻無(wú)能為力。逆天的是Html5提供了一個(gè)瀏覽器端的數(shù)據(jù)庫(kù)支持，允許我們直接通JS的API在瀏覽器端創(chuàng)建一個(gè)本地的數(shù)據(jù)庫(kù)，而且支持標(biāo)準(zhǔn)的SQL的CRUD操作，讓離線的Web應(yīng)用更加方便的存儲(chǔ)結(jié)構(gòu)化的數(shù)據(jù)。接下里介紹一下本地?cái)?shù)據(jù)的相關(guān)API和用法。
操作本地?cái)?shù)據(jù)庫(kù)的最基本的步驟是：
- 第一步：openDatabase方法：創(chuàng)建一個(gè)訪問(wèn)數(shù)據(jù)庫(kù)的對(duì)象。
- 第二步：使用第一步創(chuàng)建的數(shù)據(jù)庫(kù)訪問(wèn)對(duì)象來(lái)執(zhí)行transaction方法，通過(guò)此方法可以設(shè)置一個(gè)開(kāi)啟事務(wù)成功的事件響應(yīng)方法，在事件響應(yīng)方法中可以執(zhí)行SQL.
- 第三步：通過(guò)executeSql方法執(zhí)行查詢，當(dāng)然查詢可以是：CRUD。
接下來(lái)分別介紹一下相關(guān)的方法的參數(shù)和用法。
（1）openDatabase方法：
//Demo：獲取或者創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)，如果數(shù)據(jù)庫(kù)不存在那么創(chuàng)建之 var dataBase = openDatabase("student", "1.0", "學(xué)生表", 1024 * 1024, function () { });
openDatabase方法打開(kāi)一個(gè)已經(jīng)存在的數(shù)據(jù)庫(kù)，如果數(shù)據(jù)庫(kù)不存在，它還可以創(chuàng)建數(shù)據(jù)庫(kù)。幾個(gè)參數(shù)意義分別是：
- 1，數(shù)據(jù)庫(kù)名稱。
- 2，數(shù)據(jù)庫(kù)的版本號(hào)，目前來(lái)說(shuō)傳個(gè)1.0就可以了，當(dāng)然可以不填；
- 3，對(duì)數(shù)據(jù)庫(kù)的描述。
- 4，設(shè)置分配的數(shù)據(jù)庫(kù)的大?。▎挝皇莐b）。
- 5，回調(diào)函數(shù)(可省略)。
- 初次調(diào)用時(shí)創(chuàng)建數(shù)據(jù)庫(kù)，以后就是建立連接了。
（2）db.transaction方法可以設(shè)置一個(gè)回調(diào)函數(shù)，此函數(shù)可以接受一個(gè)參數(shù)就是我們開(kāi)啟的事務(wù)的對(duì)象。然后通過(guò)此對(duì)象可以進(jìn)行執(zhí)行Sql腳本，跟下面的步驟可以結(jié)合起來(lái)。
（3）通過(guò)executeSql方法執(zhí)行查詢。
ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
參數(shù)說(shuō)明：
- qlQuery：需要具體執(zhí)行的sql語(yǔ)句，可以是create、select、update、delete；
- value1,value2..]：sql語(yǔ)句中所有使用到的參數(shù)的數(shù)組，在executeSql方法中，將s>語(yǔ)句中所要使用的參數(shù)先用“?”代替，然后依次將這些參數(shù)組成數(shù)組放在第二個(gè)參數(shù)中
- ataHandler：執(zhí)行成功是調(diào)用的回調(diào)函數(shù)，通過(guò)該函數(shù)可以獲得查詢結(jié)果集；
- 4,errorHandler：執(zhí)行失敗時(shí)調(diào)用的回調(diào)函數(shù)；
下面是一個(gè)綜合的例子，可以看一下：
<head> <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script> <script type="text/javascript"> function initDatabase() { var db = getCurrentDb();//初始化數(shù)據(jù)庫(kù) if(!db) {alert("您的瀏覽器不支持HTML5本地?cái)?shù)據(jù)庫(kù)");return;} db.transaction(function (trans) {//啟動(dòng)一個(gè)事務(wù)，并設(shè)置回調(diào)函數(shù) //執(zhí)行創(chuàng)建表的Sql腳本 trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) { }, function (trans, message) {//消息的回調(diào)函數(shù)alert(message);}); }, function (trans, result) { }, function (trans, message) { }); } $(function () {//頁(yè)面加載完成后綁定頁(yè)面按鈕的點(diǎn)擊事件 initDatabase(); $("#btnSave").click(function () { var txtName = $("#txtName").val(); var txtTitle = $("#txtTitle").val(); var txtWords = $("#txtWords").val(); var db = getCurrentDb(); //執(zhí)行sql腳本，插入數(shù)據(jù) 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() { //打開(kāi)數(shù)據(jù)庫(kù)，或者直接連接數(shù)據(jù)庫(kù)參數(shù)：數(shù)據(jù)庫(kù)名稱，版本，概述，大小 //如果數(shù)據(jù)庫(kù)不存在那么創(chuàng)建之 var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ; return db; } //顯示所有數(shù)據(jù)庫(kù)中的數(shù)據(jù)到頁(yè)面上去 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));//獲取某行數(shù)據(jù)的json對(duì)象 } } }, function (ts, message) {alert(message);var tst = message;}); }); } function appendDataToTable(data) {//將數(shù)據(jù)展示到表格里面 //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>標(biāo)題：</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="展示所喲數(shù)據(jù)" onclick="showAllTheData();"/> <table id="tblData"> </table> </body> </html>
執(zhí)行的效果如圖：
