這篇文章給大家分享的是有關(guān)本地?cái)?shù)據(jù)庫是不是html5新特性的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司專注于巫溪企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),電子商務(wù)商城網(wǎng)站建設(shè)。巫溪網(wǎng)站建設(shè)公司,為巫溪等地區(qū)提供建站服務(wù)。全流程按需定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

本地?cái)?shù)據(jù)庫是html5新特性。Html5提供了一個(gè)瀏覽器端的數(shù)據(jù)庫支持，允許開發(fā)者直接通JS的API在瀏覽器端創(chuàng)建一個(gè)本地的數(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，但是他們兩個(gè)都只能提供存儲簡單數(shù)據(jù)結(jié)構(gòu)的數(shù)據(jù)，對于復(fù)雜的Web應(yīng)用的數(shù)據(jù)卻無能為力。逆天的是Html5提供了一個(gè)瀏覽器端的數(shù)據(jù)庫支持，允許我們直接通JS的API在瀏覽器端創(chuàng)建一個(gè)本地的數(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)建一個(gè)訪問數(shù)據(jù)庫的對象。

• 第二步：使用第一步創(chuàng)建的數(shù)據(jù)庫訪問對象來執(zhí)行transaction方法，通過此方法可以設(shè)置一個(gè)開啟事務(wù)成功的事件響應(yīng)方法，在事件響應(yīng)方法中可以執(zhí)行SQL.

• 第三步：通過executeSql方法執(zhí)行查詢，當(dāng)然查詢可以是：CRUD。

接下來分別介紹一下相關(guān)的方法的參數(shù)和用法。

（1）openDatabase方法：

//Demo：獲取或者創(chuàng)建一個(gè)數(shù)據(jù)庫，如果數(shù)據(jù)庫不存在那么創(chuàng)建之
var dataBase = openDatabase("student", "1.0", "學(xué)生表", 1024 * 1024, function () { });

openDatabase方法打開一個(gè)已經(jīng)存在的數(shù)據(jù)庫，如果數(shù)據(jù)庫不存在，它還可以創(chuàng)建數(shù)據(jù)庫。幾個(gè)參數(shù)意義分別是：

• 1，數(shù)據(jù)庫名稱。

• 2，數(shù)據(jù)庫的版本號，目前來說傳個(gè)1.0就可以了，當(dāng)然可以不填；

• 3，對數(shù)據(jù)庫的描述。

• 4，設(shè)置分配的數(shù)據(jù)庫的大小（單位是kb）。

• 5，回調(diào)函數(shù)(可省略)。

• 初次調(diào)用時(shí)創(chuàng)建數(shù)據(jù)庫，以后就是建立連接了。

（2）db.transaction方法可以設(shè)置一個(gè)回調(diào)函數(shù)，此函數(shù)可以接受一個(gè)參數(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ù)組放在第二個(gè)參數(shù)中

• ataHandler：執(zhí)行成功是調(diào)用的回調(diào)函數(shù)，通過該函數(shù)可以獲得查詢結(jié)果集；

• 4,errorHandler：執(zhí)行失敗時(shí)調(diào)用的回調(diào)函數(shù)；

下面是一個(gè)綜合的例子，可以看一下：

 
    
        function initDatabase() {
            var db = getCurrentDb();//初始化數(shù)據(jù)庫
            if(!db) {alert("您的瀏覽器不支持HTML5本地?cái)?shù)據(jù)庫");return;}
            db.transaction(function (trans) {//啟動一個(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 () {//頁面加載完成后綁定頁面按鈕的點(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 += "";
            strHtml += ""+txtName+"";
            strHtml += "" + txtTitle + "";
            strHtml += "" + words + "";
            strHtml += "";
            $("#tblData").append(strHtml);
        }
    

    
        
            
                
                
            
               
                
                
            
            
                
                
            
        
用戶名：
標(biāo)題：
留言：

        
        

        
        
        
    

執(zhí)行的效果如圖：

感謝各位的閱讀！關(guān)于“本地?cái)?shù)據(jù)庫是不是html5新特性”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！