HTML5 WebSQL四种基本操作的介绍

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于HTML5 WebSQL四种基本操作的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

HTML5 WebSQL四种基本操作的介绍

我们通过一个简单的例子来了解下如何使用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”的数据库表,并且插入一条记录进去,然后从数据库表中读取中来,打印在浏览器上。

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四种基本操作的介绍

createTable

使用前一步骤得到的数据库句柄,通过数据库句柄暴露的API transaction, 执行一个数据库事务。事务的具体内容是一个SQL语句,通过executeSql调用来创建数据库表:

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

用过JDBC的朋友对这种写法应该很熟悉。

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

HTML5 WebSQL四种基本操作的介绍

insertEntry

在前一步骤中创建的user数据库表中插入一行记录,id为1,user值为Jerry,passwd为1234。

insert into user values (1,’Jerry’,’1234′)

HTML5 WebSQL四种基本操作的介绍

readEntry

还是通过第一步创建的数据库句柄_db, 执行一个数据库事务,内容为SELECT语句,从user表里读出所有记录。

HTML5 WebSQL四种基本操作的介绍

如果想清除掉Web SQL里的数据库表,在Chrome开发者工具里点击Clear storage:

HTML5 WebSQL四种基本操作的介绍

选中您要清除的Storage类型,点“Clear Site Data”即可。

HTML5 WebSQL四种基本操作的介绍

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » HTML5 WebSQL四种基本操作的介绍

发表评论

提供最优质的资源集合

立即查看 了解详情