foreword
In the previous article on indexedDB of front-end storage, we said that our project team wants to develop a project that separates the front-end and back-end, and requires storage in the front-end. We first found indexedDB, and after we studied indexedDB for a period of time, we found that it is not It is very suitable for our project. The reason will be mentioned later in the article, so we continued to look for it, so we found the Web Sql Database and found that this front-end database was more suitable for our project, so we decisively switched to the embrace of the Web Sql Database. Storing tools is the same as wearing shoes. It doesn't matter how cool they are. Fit is king. If you wear your feet because they are not suitable, you won't go far. Now that you have found suitable shoes, no, suitable storage database. Of course, the next step is To find out its character and temperament, we can use it better, so we have this article.
Why is Web Sql Database sacred?
Web Sql Database, also known as html5 local database, is a lightweight database that runs on the browser side with the HTML5 specification. In HTML5, the content that can be stored locally on the client is greatly enriched, and many functions are added to convert the data that must be saved on the server to the local client, thereby greatly improving the performance of web applications and reducing the need for the server. The burden of the client has brought the Web era back to the era of "clients are the most important and servers are light". It can be seen that its use is still very large. For example, for some data that often needs to be retrieved, you can first take it out from the background and save it to the web sql database. The next time you use it, you don't need to go to the background to retrieve it. In this way, the number of requests to the server can be reduced, and some offline operations can be done through the web sql database, because the data has been saved in the web sql database.
The API for Web Sql Database is not actually part of the HTML5 specification, but a separate specification. It manipulates the client's database through a set of APIs. Major browsers such as Safari, Chrome, Firefox, and Opera already support Web SQL Database. When people who have studied database use the web sql database, they will find that it is actually very interesting, because you will find that its storage style is very similar to our mysql database, and you can operate the local database like a mysql database. database, it is easy to get started. Although the W3C officially announced in November 2011 that the Web SQL Database specification is no longer maintained, it is still very necessary to understand these APIs for Web development due to their extensive implementation.
Web Sql Database VS indexedDB
Witty friends may have seen that, although Web Sql Database is also a technology for storing data in the browser, unlike IndexedDB, WebSQL database is more like a relational database, and I have read my previous article. Students should know that IndexedDB is more like a NoSQL database, using SQL to query data, and in our project, there are many places to do this kind of associated query, so WebSQL database is more suitable for us, in fact, indexedDB is also very good, very powerful ! After all, indexedDB is now recommended by W3C.
Three core methods of Web Sql Database
Web SQL Database is really simple and rude to use because of the three core methods defined in its specification:
1. openDatabase : This method creates a database object using an existing database or creating a new database.
var db= openDatabase(database name, version, database description, database size);
eg: var db= openDatabase("myTestDB","1.0","my test database",10*1024,[callback function (can not be)]);
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和失败的错误信息。
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 之上的应用程序。