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

CatalpaFlat 发布于2019-08-23 12:28 / 2529人阅读

摘要：下面就来分析下这行代码。函数的第行，调用了的，创建了一个名为的数据库。使用前一步骤得到的数据库句柄，通过数据库句柄暴露的执行一个数据库事务。数据库表明为，主键为，有两个列和。

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

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

在浏览器里执行这个应用，会创建一个名叫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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

云数据库MySQL java 4种变量 html5的绘图代码有趣的html5代码 linux每4行提取指定数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98570.html

JavaScript の MUI-APP 数据储存方法

摘要：是手机端关系型数据库的最佳方案，各种手机都支持。但是目前手机端重量数据存储的唯一可商用方案。是里最新的数据存储规范，但不是基于，而是基于对象。与的标准相比，的扩展主要是为了跨域。有网友封装了一个框架，针对数据，在超过时自动切换到，参考。总结HTML5+的离线本地存储的多种方案: [ √ ] HTML5标准方案：cookie、localstorage、sessionstorage、w...

fancyLuo 2019-08-02 15:57 评论0 收藏0
JavaScript の MUI-APP 数据储存方法

摘要：是手机端关系型数据库的最佳方案，各种手机都支持。但是目前手机端重量数据存储的唯一可商用方案。是里最新的数据存储规范，但不是基于，而是基于对象。与的标准相比，的扩展主要是为了跨域。有网友封装了一个框架，针对数据，在超过时自动切换到，参考。总结HTML5+的离线本地存储的多种方案: [ √ ] HTML5标准方案：cookie、localstorage、sessionstorage、w...

wenshi11019 2019-08-20 18:37 评论0 收藏0
[聊一聊系列]聊一聊前端存储那些事儿

摘要：如图图顾名思义，，是级别的存储。如笔者写的一篇浅析文章聊一聊百度移动端首页前端速度那些事儿读者们可以尝试使用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/frontenddriver 在web开发越来越复杂的今天，前端拥有的能力也越来越多。其中最重要的一项莫过于web存储。...

caige 2019-08-19 18:46 评论0 收藏0