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虽然在功能上不是很完备,但是针对一些数据较少的项目,开发更加简单快速,也可以达到很好的效果。 主 编 | 张祯悦 责 编 | 冯 博
|