通过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种基本操作的更多相关文章
- 蒲公英 · JELLY技术周刊 Vol.17: 90 行代码实现 React Hooks
蒲公英 · JELLY技术周刊 Vol.17 React Hooks 相信大家都不陌生,自被设计出以来就备受好评,在很多场景中都有极高的使用率,其中原理更是很多大厂面试中的必考题,很多朋友都能够如数家 ...
- 90行代码让微信地球转起来，太酷了！（python实现）
1.微信地球 手机重启后打开微信的一瞬间,会看到一幅有名的图片,上面站着一个 张小龙 . 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手. ...
- android第一行代码－5.监听器的两种用法和context
监听器的两种用法 1.匿名函数设置监听器 public class MainActivity extends Activity { private Button button; @Override p ...
- 100行代码实现现代版Router
原文:http://www.html-js.com/article/JavaScript-version-100-lines-of-code-to-achieve-a-modern-version ...
- HTML5 & CSS3初学者指南(1) – 编写第一行代码
介绍 网络时代已经到来.现在对人们来说,每天上网冲浪已经成为一种最为常见的行为. 在网页浏览器中输入一段文本地址,就像http://www.codeproject.com,等待一下,网页就加载到浏览器 ...
- HTML5游戏实战(4): 20行代码实现FlappyBird
这个系列很久没有更新了.几个月前有位读者调侃说,能不能一行代码做一个游戏呢.呵呵,接下来一段时间,我天天都在想这个问题,怎么能让GameBuilder+CanTK进一步简化游戏的开发呢.经过几个月的努 ...
- Html5游戏开发-145行代码完成一个RPG小Demo
lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看de ...
- HTML5游戏实战(1)：50行代码实现正面跑酷游戏
前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...
- HTML5游戏实战之20行代码实现打地鼠
之前写过一篇打地鼠的博客70行的代码实现打地鼠游戏,细致思考过后,发现70行代码都有点多余了,应用tangide的控件特性,能够将代码量缩减到20行左右. 先show一下终于成果,点击试玩:打地鼠.或 ...
随机推荐
- twincat3新建cpp提示"在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "stdafx.h"
自己之前在windows下面写过一些c++的函数,想在倍福工控机上直接使用,发现添加了.cpp和.h文件后无法完成编译,会提示 在查找预编译头时遇到意外的文件结尾.是否忘记了向源中添加“#includ ...
- 可移植的配置visual studio工程第三方库
现在编程有太多的好用的第三方库,例如 计算机视觉方面的opencv c++的扩充库boost 特殊的第三方库,相机库,通讯库等 使用这些库给我们带来了极大的便利,同时也有很多困扰.这个工程在我电脑上明 ...
- 改变bootstrapSwitch按钮状态
$('.switch-state').bootstrapSwitch('state',true);
- Flutter实战视频-移动电商-25.列表页_使用Provide控制子类-1
25.列表页_使用Provide控制子类-1 主要是二级分类的UI布局 1分15秒 生成我们的右侧动态类 定义list变量 开始写里面的子项,把每一个小的写了 再拼成一个大的 这样我们的小类就写完了 ...
- Linux网络命令必知必会之瑞士军刀 nc(netcat)
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. nc,全名叫 ...
- E20190215-mt
parenthesis n. 圆括号; 插入语; 插入成分; 间歇; (parentheses) individual adj. 个人的; 个别的; 独特的; n. 个人; 个体; priva ...
- [Xcode 实际操作]九、实用进阶-(17)使用CGBlendMode改变UIImage颜色，实现对图片进行混合着色
目录:[Swift]Xcode实际操作 本文将演示如何使用CGBlendMode改变UIImage颜色,实现对图片进行混合着色. 在项目文件夹[DemoApp]上点击鼠标右键 ->[New Fi ...
- assembly x86(nasm)修改后的日常
data segment ENG db 'SUNdayS Coming I Wanna Drive My Car,SUN,SUN$' ;9,3 sun1 db 'SUN' swcount db 0ah ...
- Flask (六) 项目(淘票票)
FlaskDay06 Flask项目-淘票票 RESTful REST一种软件架构风格.设计风格.而不是标准,只是提供了一组设计原则和约束条件.它主要用户客户端和服务器交互类的软件. 在前后端分离 ...
- 【bzoj1123】BLO
1123: [POI2008]BLO Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2222 Solved: 1090[Submit][Status ...