前端存储之Web Sql Database

Posted 2020-08-22 再见孙悟空

前言

在上一篇前端存储之indexedDB中说到，我们项目组要搞一个前后端分离的项目，要求在前端实现存储，我们首先找到了indexedDB，而我们研究了一段时间的indexedDB后，发现它并不是很适合我们的项目，原因文章后面会讲到，所以我们就继续找，于是我们就找到了Web Sql Database，发现这个前端数据库是比较适合我们的项目的，于是果断转投Web Sql Database的怀抱，找存储工具跟穿鞋一个道理，不在乎多炫酷，合适才是王道，要是因为不合适导致磨脚是走不长远的，既然找到了合适的鞋，不对，合适的存储数据库，当然接下里就是要摸清楚它的性格脾气啊，才能更好地为我们所用，于是便有了这篇文章。

Web Sql Database为何方神圣？

Web Sql Database又名html5本地数据库，是随着HTML5规范加入的在浏览器端运行的轻量级数据库。在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻了服务器端的负担，使Web时代重新回到了“客户端为重，服务器为轻”的时代。可以看出，它的用途还是很大的，像对于一些经常需要检索的数据，可以先将其从后台取出，保存到web sql Database中，下次再使用的时候，就不需要再到后台检索了，从而减少对服务器的请求次数，还有就是可以通过web sql Database来做一些离线操作，因为数据已经保存在web sql Database中了。

Web Sql Database的API实际上不是HTML5规范的组成部分，而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持Web SQL Database。学过数据库的人使用web sql数据库时，就会发现其实它非常有趣，因为你会发现它的存储风格跟我们的mysql之类的数据库很类似，你可以像操作mysql之类的数据库一样操作本地的数据库，很容易上手。虽然 W3C 官方在 2011 年 11 月声明已经不再维护 Web SQL Database 规范，但由于其广泛的实现程度，了解这些 API 对 Web 开发还是非常有必要的。

Web Sql Database VS indexedDB

机智的小伙伴或许已经看出来了，Web Sql Database虽然也是一种在浏览器里存储数据的技术，跟IndexedDB不同的是，WebSQL数据库更像是关系型数据库，而看过我前一篇文章的同学应该清楚，IndexedDB更像是一个NoSQL数据库，使用SQL查询数据，而我们的项目中，恰好很多地方都要做这种关联查询，所以WebSQL 数据库更加适合我们，其实indexedDB也是很好，很强大的！毕竟indexedDB才是现在W3C力荐的啊。

Web Sql Database的三大核心方法

Web SQL Database使用起来真的很简单粗暴，因为它的规范中定义的三个核心方法：

 

1. openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。

var db= openDatabase(数据库名,版本,数据库描述,数据库大小); 

eg: var db= openDatabase(“myTestDB”,”1.0”,”我的测试数据库”,10*1024,[回调函数（可以没有）]);

 

2. transaction：访问数据库，要借用transaction（）方法，这个方法允许我们根据情况控制事务提交或回滚。

 

3. executeSql：这个方法用于执行真实的SQL查询。此方法是异步的，后续的业务逻辑可以在回调函数中处理。

 

这三个方法是不是一目了然，流程基本就是打开数据库，获取事务，然后执行sql，跟我们使用后端那些数据一毛一样啊！

 

Web Sql Database的基本操作

1. 打开数据库

if (!window.openDatabase) {

             console.log(‘该浏览器不支持数据库‘);

             return false;

         }

        //1.数据库名字 2.数据库版本号 3.显示名字 4.数据库保存数据大小（以字节Byte为单位 10M）5.回调函数（非必须）

dataBase = window.openDatabase("myAutoTest.db", "1.0", "自动化测试平台数据库数据库", 10 * 1024 * 1024);

说说openDatabase方法，第一次会创建一个数据库，如果已经存在了，则打开数据库，创建的数据库就存在本地了，应该在你的用户数据的谷歌目录下面，可以自己找找看，我的本地数据库地址是：C:\Users\dengyul\AppData\Local\Google\Chrome\User Data\Default\databases。

2. 创建数据表

就是你写一条建表的sql语句，语法跟mysql之类的数据库一致，然后用executeSql方法执行该sql语句，解释一下executeSql的四个参数吧，第一个表示的是查询的字符串，第二个表示的是插入到查询中问号所在处的字符串数据，第三个是成功时执行的回调函数。返回两个参数：tx和执行的结果，第四个是失败时执行的回调函数。返回两个参数：tx和失败的错误信息。

function() {

dataBase.transaction( function(tx) {

tx.executeSql(

"create table if not exists TEMPLATE (template_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, template_name TEXT)",

[],

function(tx,result){ alert(‘创建模板表成功‘); },

function(tx, error){ alert(‘创建模板表失败:‘ + error.message);

});

});

}

 

3. 添加数据

还是调用executeSql执行插入的sql语句

function () {

dataBase.transaction(function (tx) {

tx.executeSql(

"insert into TEMPLATE (template_name) values(?)",

[‘模板1‘],

function () { alert(‘添加数据成功‘); },

function (tx, error) { alert(‘添加数据失败: ‘ + error.message);

} );

});

4. 查询数据

前面我们说过，executeSql执行成功后进入成功的回调函数，而回调函数有一个参数为result，而这个result就是查询出来的数据集。其数据类型为 SQLResultSet，其中最重要的属性—SQLResultSetRowList 类型的 rows 是数据集的“行”，rows 有两个属性：length、item，因此，获取查询结果的某一行某一列的值 ：result.rows[i].item[fieldname]。

function () {

dataBase.transaction(function (tx) {

tx.executeSql(

"select * from TEMPLATE ", [],

function (tx, result) { //执行成功的回调函数

//在这里对result 做你想要做的事情吧...........

},

function (tx, error) {

alert(‘查询失败: ‘ + error.message);

} );

});

}

 

5. 更新数据

跟上面基本一致

function (id, name) {

dataBase.transaction(function (tx) {

tx.executeSql(

"update TEMPLATE set template_name = ? where template_id = ?",

[name, id],

function (tx, result) {

//更新后的后续处理

},

function (tx, error) {

alert(‘更新失败: ‘ + error.message);

});

});

}

 

6. 删除数据

跟上面一致，将sql换成删除的语句即可，就不多做赘述了。。。。。。

总结

从上面的CRUD操作中可以看出，Web SQL Database的操作方式对传统开发人员来说还是很友好的，所以掌握起来比较容易， 虽然说Web SQL Database 规范已经废弃，但是学习学习还是很有必要的。通过这些 HTML5 Web SQL Database API 接口，相信以后会出现一些非常优秀的、建立在这些 API 之上的应用程序。