經過90行代碼學會HTML5 WebSQL的4種基本操做

時間 2019-12-06

標籤經過代碼學會 html5 html websql 基本欄目 HTML5 简体版

原文原文鏈接

Web SQL數據庫API是一個獨立的規範，在瀏覽器層面提供了本地對結構化數據的存儲，已經被不少現代瀏覽器支持了。html

咱們經過一個簡單的例子來了解下如何使用Web SQL API在瀏覽器端建立數據庫表並存儲數據。數據庫

<!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>

在瀏覽器裏執行這個應用，會建立一個名叫mydb的數據庫，裏面一張名爲「user」的數據庫表，而且插入一條記錄進去，而後從數據庫表中讀取中來，打印在瀏覽器上。promise

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

程序的入口是setupDB這個函數，下面的setInterval起了1個間隔爲200毫秒的週期執行函數，爲了模擬當前瀏覽器除了進行Web SQL數據庫外，還有其餘的任務再執行。異步

setupDB

用promise實現了一個鏈式調用，第九行代碼從語義上來講很容易理解：首先建立數據庫(createDatabase)，而後建立數據庫表(createTable)，而後插入一條記錄到數據庫表裏(insertEntry), 而後立刻把剛纔插入表裏的記錄讀出來(readEntry)。最後打印到瀏覽器上。函數

你們看我第16行的_createDatabaseOK的函數延時1秒執行，僅僅是爲了演示WebSQL API 異步調用的最佳實踐。工具

createDatabase函數的第15行，調用了Web SQL API的openDatabase，建立了一個名爲mydb的數據庫。openDatabase會返回一個數據庫句柄，咱們保存在屬性_db裏以便後續使用。this