通过90行代码学会HTML5 WebSQL的4种基本操作

举报
汪子熙 发表于 2021/11/13 17:12:44 2021/11/13
【摘要】 Web SQL数据库API是一个独立的规范,在浏览器层面提供了本地对结构化数据的存储,已经被很多现代浏览器支持了。我们通过一个简单的例子来了解下如何使用Web SQL API在浏览器端创建数据库表并存储数据。<!doctype html><html><head> <script> var end; function setupDB() { return thi...

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"即可。

另一个关于 JavaScript 的开发技巧

有没有想过给您的网站增添语音识别的功能?比如您的用户不用点鼠标,仅仅通过电脑或者手机的麦克风发布命令,比如"下拉到页面底部”,或者“跳转到下一页”,您的网站就会执行对应命令。听起来很酷对么?然而为了实现这个功能,必须得让您网站的JavaScript脚本能够识别到这些语音输入。

这里介绍一个开源的JavaScript语言输入库,名叫annyang。

Github地址:https://github.com/TalAter/annyang

截至到2018年7月12日,这个github仓库已经有4833个Star了。

annyang实际上就是一个只有2KB大小的JavaScript脚本文件,使用起来非常方便。

下面就跟着我一起做一个Hello World应用吧,看看您通过麦克风说话的声音是如何被这个JavaScript库文件识别到的。

新建一个html文件,将下面的代码复制进去。将它部署到您本地的Tomcat或者nodejs服务器上。

<html>

<script src="annyang.min.js"></script>

<script>

if (annyang) {

var commands = {

"Hello": function() {

alert(" I have heard your voice!");

}

};

var commands2 = {

"Bye": function(){

alert("再见!");

}

}

annyang.addCommands(commands);

annyang.addCommands(commands2);

annyang.start();

}

</script>

</html>

我测试用的是Chrome。

当您第一次在浏览器里访问这个网页时,会弹出下面的Chrome对话框,提示您这个应用要使用您电脑上的麦克风。点Allow按钮即可。

这个应用有两个地方向您提示它可以接受语音输入。第一处是下图1的红色小圆圈。

第二处是一个小的麦克风图标,点击之后,可以设置允许或者禁止麦克风。我们当然是要选择允许啦,否则如何接受语音输入呢?

如果您的笔记本电脑本身也有麦克风,可以从这个下拉菜单里选择用笔记本自带的麦克风,还是用外接的麦克风。我用的是后者。

现在可以测试了。

因为代码里我给Hello这个语音绑定的执行函数是一个alert弹出对话框,所以当我对着麦克风说了一句“Hello"之后,我的浏览器立即弹出了这个对话框。

同样,说了"Bye"后,会弹出“再见”。我在响应“Bye”这个语音的函数设置了一个断点,大家通过调用栈也可以观察到annyang的处理逻辑。

从annyang的github上能看出,中文也在支持的语音之列,所以大家放心大胆地使用吧!

https://github.com/TalAter/annyang/blob/master/docs/FAQ.md

连粤语都支持,厉害了!

更多细节,请查阅annyang的官网。

https://www.talater.com/annyang/

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。