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