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"即可。
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
相关推荐
虽然说学习ASP.NET不需要任何ASP基础,但是我觉得如果大家ASP不会,还是先看一下【十天学会ASP教程】,大家所需要了解的不是ASP的程序怎么写,而是怎么构建服务器,怎么使用HTML表单,同时对SQL语句有一个基础和理解...
•无需美工、代码简单,提升Web开发4-8倍效率 设计灵活、高效、开源的组件层 •有任何数据库编程基础2天内即可轻松上手 •Java、.Net、PHP模型互通,学会一种、掌握两种,最大限度为用户节省跨平台成本 •支持...
•无需美工、代码简单,提升Web开发4-8倍效率 设计灵活、高效、开源的组件层 •有任何数据库编程基础2天内即可轻松上手 •Java、.Net、PHP模型互通,学会一种、掌握两种,最大限度为用户节省跨平台成本 •支持...
•无需美工、代码简单,提升Web开发4-8倍效率 设计灵活、高效、开源的组件层 •有任何数据库编程基础2天内即可轻松上手 •Java、.Net、PHP模型互通,学会一种、掌握两种,最大限度为用户节省跨平台成本 •支持...
本书分为12章,涵盖了使用Access 2003来设计数据库系统的相关概念与技巧,通过实例让读者轻松学会表、查询、窗体、数据访问页的制作,更有宏、控件、VBA等高级应用知识等待你去探索。 本书理论与实践相结合,解说...
本书分为12章,涵盖了使用Access 2003来设计数据库系统的相关概念与技巧,通过实例让读者轻松学会表、查询、窗体、数据访问页的制作,更有宏、控件、VBA等高级应用知识等待你去探索。 本书理论与实践相结合,解说...
希望通过本书,不仅能帮助前端工程师们夯实基础,而且还能写出简洁、优美的代码,为应用带来良好的用户体验。作者简介 · · · · · ·李银城(网名:会编程的银猪)资深前端工程师,现就职于人人网。知乎著名的...
通过建立这个音乐网站,可以学会建立网站的过程,学会Html语言,ASP编程方法等。主要界面的效果图,列出了一些主要代码。 关键词 : ASP.NET ,电子商务, 数据库 目 录 第1章 绪 论 1 1.1...
JSP是一种如日中天的新型Internet/Intranet开发语言,可以在多种操作系统平台和多种Web服务器下使用。本书从最基础的JSP开发开始,循序渐进地介绍了JSP 开发技术,并涵盖了许多高级主题,如需要在企业级Web应用中...
•无需美工、代码简单,提升Web开发4-8倍效率 设计灵活、高效、开源的组件层 •有任何数据库编程基础2天内即可轻松上手 •Java、.Net、PHP模型互通,学会一种、掌握两种,最大限度为用户节省跨平台成本 •支持...
书中结合代码示例生动透彻地讲述了面向对象思想的精髓,让读者真正学会以对象方式进行思考。此外,本书还讨论了各种与面向对象概念密切相关的应用主题,包括XML、UML建模语言、持久存储、分布式计算和客户/服务器...
技术点 ADO.Net技术应用、SQLServer、MD5安全算法、基于NPOI的Excel文件处理、树状结构数据处理、递归、CodeSmith、代码生成器、三层架构。 项目说明 这是一个用WinForm技术实现的系统,传智播客在开课的半个月就...
对于Web开发,我使用了HTML,CSS,JavaScript,PHP和SQL(Oracle和MySQL)。 我拥有气象学学士学位,数学副修学位和Web开发证书,并且拥有大约2至3年的科学编程和数据分析经验,2年的数学/统计研究经验以及3年的开发...
初学Java,不建议用IDE工具,通过一行行的敲代码,你会碰到很多问题,只有这样,你才能学会怎样解决问题,并加深自己对Java的理解。 准备好后,开始进入激动人心的Java学习里程吧! 3. Java基础学习之路 学习Java的...
一个关于在线考试的web系统,具有试卷生成功能的ASP+SQL Server源码-an examination of online web system, Generating function papers with the ASP SQL Server source code ======================== 考试系统...
基本的SQL 命令只需很少时间就能学会,最高级的命令在几天内便可掌握。 SQL为许多任务提供了命令,包括: ☆查询数据 ☆在表中插入、修改和删除记录 ☆建立、修改和删除数据对象 ☆控制对数据和数据对象的存取 ☆...
这对每一位其他的行业的业务精英来说,简直就是“小菜一碟”,学会html、json和SQL语法远比进一步提高在本行业的业务水平更容易,您的智慧很快被“翻译”成互联网应用系统软件。 • 降低开发成本:无需雇佣高水平...
通过分析和学习这些源码,学生将能够深入理解Web应用中图片上传功能的工作原理,并且学会如何设计和实现一个安全、高效、用户友好的图片上传系统。此外,该项目还能够帮助学生提升他们的编程技能,特别