三个核心的方法:
1.openDatabase():创建数据库
2.transaction():进行事务的回滚
3.executeSql:用于执行实际的SQL语句
<!--<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML5中对数据库的操作</title>
<script>
function optionDB() {
//openDatabase()打开数据库,如果不存在,则创建;如果存在,则直接打开
/*第一个参数:数据库名称
第二个参数:版本号,此处写1就可以了
第三个参数:描述信息
第四个参数:数据库大小
第五个参数:回调函数,当数据库创建成功的时候进行回调
*/
var DB = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024, function () {
// alert("数据库创建成功");
});
/*执行查询语句*/
DB.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
alert("创建表成功");
//增加数据
//方法一:直接添加死数据
//tx.executeSql('insert into LOGS(id,log)values(3,"菜鸟驿站")');
//tx.executeSql('insert into LOGS(id,log)values(4,"教程")');
//方法二:动态添加数据
tx.executeSql('insert into LOGS(id,log)values(?,?)', [document.getElementById("user_name").value, document.getElementById("user_pass").value]);
alert("添加数据成功");
});
DB.transaction(function (tx) {
//删除数据
tx.executeSql('delete from LOGS where id = 111');
alert("删除数据成功");
});
DB.transaction(function (tx) {
//更新数据
tx.executeSql('update LOGS set log="ffff" where id=1', [], function (tx, results) {
var len = results.rows.length;
//alert(len);
msg = "<p>查询记录条数:" + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (var i = 0; i < len; i++) {
//alert(results.rows.item(i).log);
document.getElementById("status").innerHTML += "<br>" + results.rows.item(i).log;
}
}, null);
alert("数据更新成功");
});
//查询数据
tx.executeSql('select * from LOGS', [], function (tx, results) {
var len = results.rows.length;
//alert(len);
msg = "<p>查询记录条数:" + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (var i = 0; i < len; i++) {
//alert(results.rows.item(i).log);
document.getElementById("status").innerHTML += "<br>" + results.rows.item(i).log;
}
}, null);
}
</script>
</head>
<body οnlοad="">
用户名:<input type="text" id="user_name"/> <br />
密码: <input type="text" id="user_pass"/><br />
<input type="button" value="加入数据库" οnclick="optionDB()"/>
<div id="status"></div>
</body>
</html>-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script type="text/javascript">
//openDatabase()打开数据库,如果不存在,则创建;如果存在,则直接打开
/*第一个参数:数据库名称
第二个参数:版本号,此处写1就可以了
第三个参数:描述信息
第四个参数:数据库大小
第五个参数:回调函数,当数据库创建成功的时候进行回调
*/
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
//增加数据
//方法一:直接添加死数据
//tx.executeSql('insert into LOGS(id,log)values(3,"菜鸟驿站")');
//tx.executeSql('insert into LOGS(id,log)values(4,"教程")');
//方法二:动态添加数据
// tx.executeSql('insert into LOGS(id,log)values(?,?)', [document.getElementById("user_name").value, document.getElementById("user_pass").value]);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
msg = '<p>数据表已创建,且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
msg = '<p>删除 id 为 1 的记录。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
msg = '<p>更新 id 为 2 的记录。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++) {
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">状态信息</div>
</body>
</html>