标签：transaction tx executeSql 数据库 db HTML5 STUDENT 前端
1 前言
在开发过程中，大多数项目都是后台编写代码对数据库进行操作，其实在HTML5中也可以使用Web Sql Api对数据库实现增删改查。
2 Web Sql的内容
2.1 三个核心方法
（1）openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
（2）transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
（3）executeSql：这个方法用于执行实际的 SQL 查询。
2.2 操作流程
2.2.1打开数据库
首先使用openDatabase()的方法来打开已存在的数据库，若不存在，则会自动创建一个新的数据库。
|
var db = openDatabase('Student', '1.0', 'Test', 2 * 1024 * 1024); |
方法里面对应的参数分别是：
1.定义的数据库名称
2.数据库版本号
3.描述文本
4.数据库的大小
5.创建回调
2.2.2 执行相关的操作
（1）创建数据库和表
在创建表之前需要定义database.transaction() 函数
|
var db = openDatabase('Student', '1.0', 'Test', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS STUDENT (id unique, name)'); }); |
执行上面的语句，就会在新建的数据库中创建一个名为STUDENT的表
插入数据
可以在新建的表中插入几条数据
|
var db = openDatabase('Student', '1.0', 'Test', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS STUDENT (id unique, name)'); tx.executeSql('INSERT INTO STUDENT (id, name) VALUES (1, “Jack”)'); tx.executeSql('INSERT INTO STUDENT (id, name) VALUES (2, “Lucy”)'); }); |
读取数据
|
db.transaction(function (tx) { tx.executeSql('SELECT * FROM STUDENT', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>查询学生人数: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).name ); } }, null); }); |
删除数据
|
db.transaction(function (tx) { tx.executeSql('DELETE FROM STUDENT WHERE id=1'); }); |
更新数据
|
db.transaction(function (tx) { tx.executeSql('UPDATE STUDENT SET name = “Rose” WHERE id=2'); }); |
以上四种操作均可以用动态值的方式进行。
HTML5中的Web Sql虽然在功能上不是很完备，但是针对一些数据较少的项目，开发更加简单快速，也可以达到很好的效果。
END
主 编 | 张祯悦
责 编 | 冯 博
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！
标签：transaction,tx,executeSql,数据库,db,HTML5,STUDENT,前端 来源： https://blog.51cto.com/u_15281984/2957335
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。