HTML5 WebSQL四種基本操作的介紹-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5 WebSQL四種基本操作的介紹

不言

Oct 22, 2018 pm 05:06 PM

chromehtml5javascriptlocalstorage

這篇文章帶給大家的內容是關於HTML5 WebSQL四種基本操作的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

Web SQL資料庫API是一個獨立的規範，在瀏覽器層面提供了本地對結構化資料的存儲，已經被很多現代瀏覽器支援了。

HTML5 WebSQL四種基本操作的介紹

我們透過一個簡單的範例來了解下如何使用Web SQL API在瀏覽器端建立資料庫表並儲存資料。

nbsp;html>


    <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(&#39;create table if not exists user(id unique, user, passwd)&#39;);
            });
            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(&#39;mydb&#39;, &#39;1.0&#39;, &#39;JerryTestdb&#39;, 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,&#39;Jerry&#39;,&#39;1234&#39;)");
            });
            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(&#39;select * from user&#39;, [], 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(&#39;id: &#39; + oResults.rows[i].id);
            document.writeln(&#39;user: &#39; + oResults.rows[i].user);
            document.writeln(&#39;passwd: &#39; + 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>

在瀏覽器裡執行這個應用，會建立一個名叫mydb的資料庫，裡面一張名為「user」的資料庫表，並且插入一筆記錄進去，然後從資料庫表中讀取中來，列印在瀏覽器上。

HTML5 WebSQL四種基本操作的介紹

下面就來分析下這90行程式碼。

程式的入口是setupDB這個函數，下面的setInterval起了1個間隔為200毫秒的週期執行函數，為了模擬目前瀏覽器除了進行Web SQL資料庫外，還有其他的任務再執行。

HTML5 WebSQL四種基本操作的介紹

setupDB

#用promise實作了一個鍊式調用，第九行程式碼從語義上來說很容易理解：先建立資料庫(createDatabase)，然後建立資料庫表(createTable)，然後插入一筆記錄到資料庫表裡(insertEntry), 然後馬上把剛才插入表裡的記錄讀出來(readEntry)。最後列印到瀏覽器上。

大家看我第16行的_createDatabaseOK的函數延時1秒執行，只是為了示範WebSQL API 非同步呼叫的最佳實踐。

createDatabase函數的第15行，呼叫了Web SQL API的openDatabase，建立了一個名為mydb的資料庫。 openDatabase會傳回一個資料庫句柄，我們保存在屬性_db以便後續使用。

HTML5 WebSQL四種基本操作的介紹