HTML5教程

前端|HTML5也能操作数据库

本文主要是介绍前端|HTML5也能操作数据库，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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 团队

   

微信号：算法与编程之美          

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！

这篇关于前端|HTML5也能操作数据库的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航