专栏首页Jerry的SAP技术分享通过90行代码学会HTML5 WebSQL的4种基本操作

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

版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog.csdn.net/article/details/81701608

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    Web SQL数据库API是一个独立的规范,在浏览器层面提供了本地对结构化数据的存储,已经被很多现代浏览器支持了。

    Jerry Wang
  • WebUI Opportunity belongs to me的处理逻辑

    版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

    Jerry Wang
  • TypeScript里的.d.ts语法

    https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-...

    Jerry Wang
  • webpack2 的 tree-shaking 好用吗?

    代码压缩的现状 下面是一个使用 react 的业务的代码依赖,但是实际上业务代码中并没有对依赖图中标识的模块,也就是说构建工具将不需要的代码打包到了最终的代码当...

    IMWeb前端团队
  • javascript基础详解-作用域

    JavaScript语言的作用域仅存在于函数范围中。这是必须要牢记的一点,还有一点重要的就是作用域的提升规则。

    用户2458785
  • 广告小程序后端开发(10.增加用户积分)

    玩蛇的胖纸
  • 防抖、节流、call、bind、apply、new、柯里化实现

    前端迷
  • javascript模仿块级作用域

    模仿块级作用域 var somefunction=function(){ ///这里是块级作用域 } somefunction(); 在这里定义了一个函数,然后...

    wangxl
  • create()方法详解

    create() 方法将自动收集提交的表单数据并创建数据对象而无需人工干预,这在表单数据字段非常多的情况下更具优势。

    公众号php_pachong
  • 函数声明与函数表达式

    函数声明:直接声明一个函数 function fnName() {};function声明必须有方法名,而出现在表达式里的方法名都会被忽略。

    meteoric

扫码关注云+社区

领取腾讯云代金券