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

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

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

image.png

我们通过一个简单的例子来了解下如何使用Web SQL API在浏览器端创建数据库表并存储数据。image.pngimage.pngimage.pngimage.pngimage.pngimage.png

在浏览器里执行这个应用,会创建一个名叫mydb的数据库,里面一张名为“user”的数据库表,并且插入一条记录进去,然后从数据库表中读取中来,打印在浏览器上。


image.png


下面就来分析下这90行代码。


程序的入口是setupDB这个函数,下面的setInterval起了1个间隔为200毫秒的周期执行函数,为了模拟当前浏览器除了进行Web SQL数据库外,还有其他的任务再执行。


image.png


setupDB


用promise实现了一个链式调用,第九行代码从语义上来说很容易理解:首先创建数据库(createDatabase),然后创建数据库表(createTable),然后插入一条记录到数据库表里(insertEntry), 然后马上把刚才插入表里的记录读出来(readEntry)。最后打印到浏览器上。


大家看我第16行的_createDatabaseOK的函数延时1秒执行,仅仅是为了演示WebSQL API 异步调用的最佳实践。


createDatabase函数的第15行,调用了Web SQL API的openDatabase,创建了一个名为mydb的数据库。openDatabase会返回一个数据库句柄,我们保存在属性_db里以便后续使用。


image.png


createTable


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


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


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


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


image.png


insertEntry


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


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


image.png


readEntry


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


image.png


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


image.png


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

image.png


相关文章
|
SQL 存储 移动开发
通过90行代码学会HTML5 WebSQL的4种基本操作
通过90行代码学会HTML5 WebSQL的4种基本操作
118 0
通过90行代码学会HTML5 WebSQL的4种基本操作
|
SQL Web App开发 存储
HTML5中的本地、WebSql、离线应用存储
1.   HTML5存储相关API a)   Localstorage 本地存储 b)   Web Sql DataBase 本地数据库存储 c)   .manifest 离线应用存储 2.   HTML5 localStorage 本地存储: a)   本地存储是一个window的属性:, 相当于一个大型的Cookie; b)   window.
1045 0
|
SQL Web App开发 存储
HTML5安全风险详析之三:WebSQL攻击
原文地址:http://blog.csdn.net/hfahe/article/details/8049414   一、WebSQL安全风险简介         数据库安全一直是后端人员广泛关注和需要预防的问题。
1001 0
|
14天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
5天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
9天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
9天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
16天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
17天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
13 0