目前只有谷歌的Chrome浏览器支持websql,其他浏览器暂不支持websql。
大家测试的时候,请使用Chrome浏览器。
html5中的websql,类似于数据库,语法跟数据库中的语法差不多。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5学习(websql)</title>
<link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
<h3>html5学习(websql)</h3>
<div id="show" style="height: 260px;">
</div>
</body>
<script type="text/javascript">
function $(elementId) {
return document.getElementById(elementId);
}
var divNode = $("show");
//
if (window.openDatabase) {
//目前只有谷歌的Chrome浏览器支持websql,其他浏览器暂不支持websql
var db = openDatabase("employees", "1.0", "员工数据库", 1024 * 1024,
function() {
});
db.transaction(function(fx) {
//创建表
fx.executeSql("create table user(id int, name text)", [],
function(fx, result) {
console.log(result);
alert("创建表成功");
}, function() {
alert("创建表失败");
});
//新增一条数据
fx.executeSql("insert into user(id, name) values(?, ?)", [1, "令狐冲"],
function(fx, result) {
console.log(result);
result.rowsAffected > 0 ? alert("插入数据成功"):alert("插入数据失败");
}, function() {
alert("插入数据失败****");
});
//更新数据
fx.executeSql("update user set name = ? where id = ?", ["韦小宝", 1],
function(fx, result) {
console.log(result);
result.rowsAffected > 0 ? alert("更新数据成功"):alert("更新数据失败");
}, function() {
alert("更新数据失败****");
});
//删除数据
// fx.executeSql("delete from user where id = ?", [1],
// function(fx, result) {
// console.log(result);
// result.rowsAffected > 0 ? alert("删除数据成功"):alert("删除数据失败");
// }, function() {
// alert("删除数据失败****");
// });
//查询数据
fx.executeSql("select id, name from user", [],
function(fx, result) {
console.log(result);
for (var i = 0; i < result.rows.length; i++) {
// var myRowData = result.rows[i].id + " " + result.rows[i].name;
var myRowData = result.rows.item(i).id + " " + result.rows.item(i).name;
// var myRowData = result.rows[i]["id"] + " " + result.rows[i]["name"];
// var myRowData = result.rows.item(i)["id"] + " " + result.rows.item(i)["name"];
divNode.innerHTML += myRowData + "<br />";
}
}, function() {
alert("查询数据失败****");
});
//删除表
// fx.executeSql("drop table user", [],
// function(fx, result) {
// console.log(result);
// alert("删除表成功");
// }, function() {
// alert("删除表失败****");
// });
});
} else {
divNode.innerHTML += "您的浏览器不支持websql<br />";
}
</script>
</html>
完!