本地數(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)提供了功能強大的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ù)。接下里介紹一下本地數(shù)據(jù)的相關(guān)API和用法。
操作本地數(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ù)庫的大小(單位是kb)。
- 5,回調(diào)函數(shù)(可省略)。
- 初次調(diào)用時創(chuàng)建數(shù)據(jù)庫,以后就是建立連接了。
(2)db.transaction方法可以設(shè)置一個回調(diào)函數(shù),此函數(shù)可以接受一個參數(shù)就是我們開啟的事務(wù)的對象。然后通過此對象可以進行執(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本地數(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 () {//頁面加載完成后綁定頁面按鈕的點擊事件 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í)行的效果如圖: