今天咱们就说说HTML5里那个Web SQL数据库。别看它跟MySQL差不多复杂，但其实你也能像玩似的轻松操控它。那怎么搞定Web SQL Database API？我这就教你几个简单步骤咯：首先，创建个数据库，接着打开它，然后建立表，填入或修改数据，甚至可以直接删除整个表~
1. 打开并创建数据库
如果想搞定数据库，那就要学会用’openDatabase’这个技能。这个方法虽然有点麻烦，但关键是要告诉它我们需要啥样的数据库，用哪个版本的，还有数据库应该怎么去描述之类的。比如这样说吧：
javascript 搞定了~建个新数据库，只需要输入几个简单的单词：'mydb'（这可是我们的数据库名字呢）,'1.0'（这个可是版本哦）和"测试数据库"这个个性的名字。然后设定下要使用的存储空间大小，2MB就够用！轻松完成！
哇！这就是说，得去找那个叫做”mydb”的数据库咯。如果找不到，那就自己动手来创建一个新的呗~
2. 创建数据表
好，咱们开始！首先得用那个叫 `transaction` 的东东启动个事务，然后用 `executeSql` 处理 SQL 语句，敲定要操作的那张表格就好。举个例子哈：
直接在这里开个小摊儿卖数据库，然后用我们的交易过程把事情解决掉
别慌，咱先弄个LOGS表。表格就俩字段，ID和LOG，注意ID要独特点。
var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
if (!dataBase) {
alert("数据库创建失败！");
} else {
alert("数据库创建成功！");
}
});
这句话就是在你的数据库中创建一张叫”LOGS”的新表格，里面有两个关键字段：`id`跟`log`哦～
3. 添加数据
搞定表格之后，就可以用那个叫作’execcuteSql’的方法来添加内容了。大概就是这么个操作方式：
我们搞个新数据插入LOG表！把ID设为1，LOGTEXT写成”foobar”就可以了！只要敲几个字：”INSERT INTO LOGS (id, log) VALUES (1, ‘foobar’)”，搞定！
就在咱的’LOGS’表里加了个小东西: ‘id’被我设为1号，看看首页那条就知道啦; 然后,’log’那西，现在变成了”foobar”哟~
4. 查询数据
我们可以使用`executeSql`方法来查询数据。例如：
看看日志，把里面的东西都查一遍。就是这个：`tx.query(“SELECT * FROM LOGS”, null, function(res) {`)
我们先给结果里的行数定个名字叫len，然后用i来计数。
this.createTable=function() {
dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alert('创建stu表成功'); },
function(tx, error){ alert('创建stu表失败:' + error.message);
});
});
}
for (i = 0; i < len; i++) {
检测结果出来了，第 i 行的日志是什么？
}
}, null);
这个小程序就是帮我们把”LOGs”表格里所有的记录都找出来。每次找到新纪录，都会弹出个新窗口告诉你那个“log”（日志）这栏是啥。
5. 更新数据
我们可以使用`executeSql`方法来更新数据。例如：
就直接对LOG表的第1条记录，将’log’这个字段改名为’更新后的日志’就好！
this.insert = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[id, '徐明祥'],
function () { alert('添加数据成功'); },
function (tx, error) { alert('添加数据失败: ' + error.message);
} );
});
这段代码主要是去处理那带有’id’=1的’log’,然后改写成”已修改”！
6. 删除数据
this.query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //执行成功的回调函数
//在这里对result 做你想要做的事情吧...........
},
function (tx, error) {
alert('查询失败: ' + error.message);
} );
});
}
我们可以使用`executeSql`方法来删除数据。例如：
删除LOG表中的第一条记录，就用两句代码搞定。
这段代码会删除`id`为1的记录。
7. 删除表
简而言之，如果想要去掉表格，那就按照这个步骤来做嘛——在你的SQL里头加个`executeSql`，如下所示：
interface SQLResultSet {
readonly attribute long insertId;
readonly attribute long rowsAffected;
readonly attribute SQLResultSetRowList rows;
};
把日志表删了，看到就烦。
这段代码会删除`LOGS`表。
经过我们刚刚的探讨，大家明白怎样利用HTML5的WebSQLDatabaseAPI来搭建自己的本地数据库了？这虽然并非HTML5的正规方式，不过对于在客户端存储和操作数据来说，简直就是必备利器！
HTML 5的Web SQL数据库API真心好用，存文件、弄数据都方便得很。用着就像操作MySQL那样顺手，想怎么建表、查数据、改删什么的都行。看完这篇文章，保证你也能用得溜儿。
this.update = function (id, name) {
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? where id= ?",
[name, id],
function (tx, result) {
},
function (tx, error) {
alert('更新失败: ' + error.message);
});
});
}
和你说说你们觉得HTML5里的那个Web SQL Database API怎么样？咱们可以在评论区聊聊，记得点赞支持我顺便把这篇文章分享给你的朋友们，让大家都来了解下这个Web SQL Database API究竟是个啥玩意儿。
this.del = function (id) {
dataBase.transaction(function (tx) {
tx.executeSql(
"delete from stu where id= ?",
[id],
function (tx, result) {
},
function (tx, error) {
alert('删除失败: ' + error.message);
});
});
}
评论0