WebSQL

曾经的好帮手--WebSQL免费看

WebSQL的使用方法,用WebSQL编写代码实现评论框

2018-08-27侠课岛    初级拔高       

前端/前端/客户端存储 14     0     3592

在经过了上一章 IndexedDB 的洗礼后,不知感觉如何呢?这一章我们同样要介绍一个数据库类型的客户端存储——WebSQL。从名字就可以看出,这与我们熟悉的 MySQL 等数据库有着千丝万缕的联系。没错,我们简粗暴单地可以把它理解成是存放在客户端(浏览器)中的 MySQL。但我们称它为曾经的好帮手是因为 WebSQL 已经正式被废弃了。

5.1 已被废弃的规范

首先要知道 WebSQL 并非是 HTML 规范的产物,原本也只有几家浏览器支持(比如万能的 Chrome)。那么,我们先来看一下浏览器的兼容性。

从图上可以看出,IE 系全线飘红。并且随着“竞争者” IndexedDB 的出现,WebSQL 的规范也已经停止更新了。那么为什么要介绍这个技术呢?这是因为 WebSQL 在移动端上有着较好的支持,并且相对于 IndexedDB 其使用方式也相对更为友好。在维护已有项目时,我们可能会碰到它。

5.2 WebSQL 的使用方法

对于拥有数据库经验(如:MySQL、Oracle 等)的小伙伴,这一章节其实基本可以跳过。因为 WebSQL 的本质就是一个放在浏览器中的 MySQL。当然,没有经验的小伙伴也不用担心,下面我们会对数据库的基本概念做一个介绍。

对于一个数据库来说,一般分为库(database)表(table)数据(data),三个部分。这三个部分的关系如下。例如我们在 MySQL 中可以创建许多库,而每个库中可以创建许多表,最终数据都存放在这些表中。对应到 WebSQL 中的话,我们把 MySQL 的位置换成独立的域名即可。

在正式使用之前,我们可以通过 "openDatabase" in window 命令来检查兼容性。

创建数据库

WebSQL 在使用上要比 IndexedDB 友好许多(前提是你要有 SQL 方面的基础知识)。在使用数据库时与 IndexedDB 类似,都需要输入名称、版本号,同时 WebSQL 还需要你提供一个别名和数据库的容量。因为理论上来说,WebSQL 可以是无限大的。

不过与 IndexedDB 不同的是,这里的版本号并不会触发更新事件。只是用来做校验的,如果版本落后的话就需要手动执行相应的更新程序。

下面我们就来简单地创建一个名为 comment 的数据库,容量为 5M。

db = window.openDatabase("comment", 1, "comment", 5 * 1024 * 1024)

在 Chrome 中,我们执行之后,可以看到数据库顺利地被创建了出来。

在 Application 的 WebSQL 面板中,我们也可以看到数据库。不过此时什么都没有,毕竟这只是一个空库。

使用事务

在创建完数据库之后,我们就需要建表了。在之后的操作,可以说是非常简单粗暴,我们只要使用事务即可。这里的事务同样也是用来保障数据的安全性的。

下面我们就利用事务来创建一个 user 表。

db = window.openDatabase("comment", 1, "comment", 5 * 1024 * 1024)
db.transaction(function(trans){
    var createTableUser = `create table if not exists user(id INTEGER PRIMARY KEY AUTOINCREMENT, username varchar(30), email varchar(100), createtime DATE) `
    trans.executeSql(createTableUser)
},function(e){
    throw new Error(e)
}, function(){
    console.log(`表已经创建成功`)
})

在执行之前,我们先来解释一下上面的代码。在获得 db 对象之后,我们就可以使用事务 transaction 了。当然事务也分为只读、读写不同种类,这里我们用通用的 transaction

这个事务便是整个 WebSQL 的精髓,因为几乎所有的操作都在这里面执行了。不会像 IndexedDB 那样提供各种 API 方法,非常的简单粗暴。transaction 一共接受三个回调函数,第一个为要具体执行的内容,第二个为错误,第三个成功时的处理。在具体的执行中,我们也不用去熟悉 API,只要使用我们知道的 SQL 语句即可,唯一要注意的就是在 javaScript 中字符串拼接的问题。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

14

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?