hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

HTML5 WebSQL四种基础操纵的引见【html5教程】

2019-11-26HTML搜搜PHP网47°c
A+ A-
本篇文章给人人带来的内容是关于HTML5 WebSQL四种基础操纵的引见,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

Web SQL数据库API是一个自力的范例,在浏览器层面供应了当地对结构化数据的存储,已被许多当代浏览器支撑了。

我们经由过程一个简朴的例子来了解下怎样运用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”的数据库表,而且插进去一条纪录进去,然后从数据库表中读取中来,打印在浏览器上。

下面就来剖析下这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里以便后续运用。

createTable

运用前一步骤获得的数据库句柄,经由过程数据库句柄暴露的API transaction, 实行一个数据库事件。事件的具体内容是一个SQL语句,经由过程executeSql挪用来建立数据库表:

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

用过JDBC的朋侪对这类写法应当很熟悉。

数据库表明为user,主键为id,有两个列user和passwd。

insertEntry

在前一步骤中建立的user数据库表中插进去一行纪录,id为1,user值为Jerry,passwd为1234。

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

readEntry

照样经由过程第一步建立的数据库句柄_db, 实行一个数据库事件,内容为SELECT语句,从user内外读出一切纪录。

假如想清撤除Web SQL里的数据库表,在Chrome开发者东西里点击Clear storage:

选中您要消灭的Storage范例,点“Clear Site Data"即可。

以上就是HTML5 WebSQL四种基础操纵的引见的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
HTML5 WebSQL四种基础操纵的引见【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
推荐阅读