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

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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

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

90行代码！大一学生自学编程，自创搜题网站，已在GitHub开源
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达大数据文摘出品作者:Caleb 考试早已不是学生的"特权"了. ...
OpenCV-Python实战（14）——人脸检测详解（仅需6行代码学会4种人脸检测方法）
OpenCV-Python实战(14)--人脸检测详解(仅需6行代码学会4种人脸检测方法) 0. 前言 1. 人脸处理简介 2. 安装人脸处理相关库 2.1 安装 dlib 2.2 安装 face_r ...
90行代码轻松实现！结合 Whisper + Stable-diffusion 的语音生成图像任务！
本项目将 Whisper 与 Stable Diffusion 模型结合,可以直接完成语音生成图像的任务.用户可以语音输入一个短句,Whisper 会自动将语音转化为文本,接着,Stable Diff ...
HTML5游戏实战 2 90行代码实现捕鱼达人
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 捕鱼达人 ...
HTML5游戏实战(2)：90行代码实现捕鱼达人
捕鱼达人是一款非常流行的游戏,几年里赚取了数以千万的收入,这里借用它来介绍一下用Gamebuilder+CanTK开发游戏的方法.其实赚钱的游戏未必技术就很难,今天我们就仅用90来行代码来实现这个游戏 ...
onclick 源码_仿照React源码流程打造90行代码的Hooks
作者:苏畅转发链接:https://mp.weixin.qq.com/s/YLSD4IojDWTPlov_RQtVAA 前言你可能已经看过其它简易的Hooks实现.那么本文和其它实现有什么区别呢? ...
Python从入门到入土的90行代码
文章目录基础入门菜鸟提升基础晋级高手之路内置包库奇技淫巧基础入门 1 python 即在命令行输入python,进入Python的开发环境. 2 x = 1+2*3-4/5+6**2 加 ...
c++ int8_t转int_Python 90行代码让微信地球转起来，你也可以！| 原力计划
作者 | xiaorang 责编 | Aholiab 头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews) 手机重启后打开微信的一瞬间,会看到一幅有名的图片,上面站着一个& ...
Python 90行代码让微信地球转起来，你也可以！| 原力计划
作者 | xiaorang 责编 | Aholiab 头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews) 手机重启后打开微信的一瞬间,会看到一幅有名的图片,上面站着一个& ...

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

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

最新文章

热门文章