HTML5中WebSQL四種基本操作的示例

這篇文章主要介紹了HTML5中WebSQL四種基本操作的示例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)長期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為遂寧企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)，遂寧網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

Web SQL數(shù)據(jù)庫API是一個(gè)獨(dú)立的規(guī)范，在瀏覽器層面提供了本地對結(jié)構(gòu)化數(shù)據(jù)的存儲(chǔ)，已經(jīng)被很多現(xiàn)代瀏覽器支持了。

我們通過一個(gè)簡單的例子來了解下如何使用Web SQL API在瀏覽器端創(chuàng)建數(shù)據(jù)庫表并存儲(chǔ)數(shù)據(jù)。

<!doctype html>
<html>
<head>
    <script>
    var end;
    function setupDB() {
        return this.createDatabase().then(createTable).then(insertEntry).then(readEntry).then(printResult);
    }
    function createTable() {
        return new Promise(function(resovle, reject) {
            console.log("prepare to create table..." + Date.now());
            this._db.transaction(function(query) {
                query.executeSql('create table if not exists user(id unique, user, passwd)');
            });
            setTimeout(_createTableOK.bind(this, resovle), 1000);
        });
    }
    function _createTableOK(resovle) {
        console.log("table created successfully..." + Date.now());
        resovle();
    }
    function createDatabase() {
        return new Promise(function(resovle, reject) {
           console.log("prepare to create database..." + Date.now());
            this._db = openDatabase('mydb', '1.0', 'JerryTestdb', 1024);
            setTimeout(_createDatabaseOK.bind(this, resovle), 1000);
        });
    }
    function _createDatabaseOK(resovle) {
        console.log("database created successfully..." + Date.now());
        resovle(this._db);
    }
    function insertEntry() {
        return new Promise(function(resolve, reject) {
            this._db.transaction(function(query) {
                query.executeSql("insert into user values (1,'Jerry','1234')");
            });
            setTimeout(_insertEntryOK.bind(this, resolve), 1000);
        });
    }
    function _insertEntryOK(resolve) {
        console.log("entry inserted to table successfully..." + Date.now());
        resolve();
    }
    function readEntry() {
        return new Promise(function(resolve, reject) {
            this._db.transaction(function(query) {
                    query.executeSql('select * from user', [], function(u, results) {
                        setTimeout(_readEntryOK.bind(this, resolve, results), 1000);
                    }); // end of query.executeSql
                } // end of function(query)
           ); // end of this._db.transaction
        });
    }
    function _readEntryOK(resolve, oResult) {
        console.log("entry readed from DB successfully..." + Date.now());
        resolve(oResult);
    }
    function printResult(oResults) {
        for (var i = 0; i < oResults.rows.length; i++) {
            document.writeln('id: ' + oResults.rows[i].id);
            document.writeln('user: ' + oResults.rows[i].user);
            document.writeln('passwd: ' + oResults.rows[i].passwd);
        }
        end = true;
    }
    function work() {
        if (end) {
            clearInterval(handle);
        } else {
            console.log(" working..." + Date.now());
        }
    }
    setupDB();
    var handle = setInterval(work, 200);
    </script>
</head>
</html>

在瀏覽器里執(zhí)行這個(gè)應(yīng)用，會(huì)創(chuàng)建一個(gè)名叫mydb的數(shù)據(jù)庫，里面一張名為“user”的數(shù)據(jù)庫表，并且插入一條記錄進(jìn)去，然后從數(shù)據(jù)庫表中讀取中來，打印在瀏覽器上。

HTML5中WebSQL四種基本操作的示例

下面就來分析下這90行代碼。

程序的入口是setupDB這個(gè)函數(shù)，下面的setInterval起了1個(gè)間隔為200毫秒的周期執(zhí)行函數(shù)，為了模擬當(dāng)前瀏覽器除了進(jìn)行Web SQL數(shù)據(jù)庫外，還有其他的任務(wù)再執(zhí)行。

HTML5中WebSQL四種基本操作的示例

setupDB

用promise實(shí)現(xiàn)了一個(gè)鏈?zhǔn)秸{(diào)用，第九行代碼從語義上來說很容易理解：首先創(chuàng)建數(shù)據(jù)庫(createDatabase)，然后創(chuàng)建數(shù)據(jù)庫表(createTable)，然后插入一條記錄到數(shù)據(jù)庫表里(insertEntry), 然后馬上把剛才插入表里的記錄讀出來(readEntry)。最后打印到瀏覽器上。

大家看我第16行的_createDatabaseOK的函數(shù)延時(shí)1秒執(zhí)行，僅僅是為了演示W(wǎng)ebSQL API 異步調(diào)用的最佳實(shí)踐。

createDatabase函數(shù)的第15行，調(diào)用了Web SQL API的openDatabase，創(chuàng)建了一個(gè)名為mydb的數(shù)據(jù)庫。openDatabase會(huì)返回一個(gè)數(shù)據(jù)庫句柄，我們保存在屬性_db里以便后續(xù)使用。

HTML5中WebSQL四種基本操作的示例

createTable

使用前一步驟得到的數(shù)據(jù)庫句柄，通過數(shù)據(jù)庫句柄暴露的API transaction, 執(zhí)行一個(gè)數(shù)據(jù)庫事務(wù)。事務(wù)的具體內(nèi)容是一個(gè)SQL語句，通過executeSql調(diào)用來創(chuàng)建數(shù)據(jù)庫表：

create table if not exists user(id unique, user, passwd)

用過JDBC的朋友對這種寫法應(yīng)該很熟悉。

數(shù)據(jù)庫表明為user，主鍵為id，有兩個(gè)列user和passwd。

HTML5中WebSQL四種基本操作的示例

insertEntry

在前一步驟中創(chuàng)建的user數(shù)據(jù)庫表中插入一行記錄，id為1，user值為Jerry，passwd為1234。

insert into user values (1,'Jerry','1234')

HTML5中WebSQL四種基本操作的示例

readEntry

還是通過第一步創(chuàng)建的數(shù)據(jù)庫句柄_db, 執(zhí)行一個(gè)數(shù)據(jù)庫事務(wù)，內(nèi)容為SELECT語句，從user表里讀出所有記錄。

HTML5中WebSQL四種基本操作的示例

如果想清除掉Web SQL里的數(shù)據(jù)庫表，在Chrome開發(fā)者工具里點(diǎn)擊Clear storage：

HTML5中WebSQL四種基本操作的示例

選中您要清除的Storage類型，點(diǎn)“Clear Site Data"即可。

HTML5中WebSQL四種基本操作的示例

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5中WebSQL四種基本操作的示例”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站標(biāo)題：HTML5中WebSQL四種基本操作的示例
網(wǎng)頁網(wǎng)址：http://muchs.cn/article44/pgdohe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、做網(wǎng)站、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容