html5学习(websql)

最新推荐文章于 2024-02-22 18:08:37 发布

程宇寒

最新推荐文章于 2024-02-22 18:08:37 发布

阅读量640

点赞数

文章标签：前端 html html5 websql html5前端开发

本文链接：https://blog.csdn.net/czh500/article/details/111991001

版权

目前只有谷歌的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 + "&nbsp;&nbsp;" + result.rows[i].name;
						var myRowData = result.rows.item(i).id + "&nbsp;&nbsp;" + result.rows.item(i).name;
// 						var myRowData = result.rows[i]["id"] + "&nbsp;&nbsp;" + result.rows[i]["name"];
// 						var myRowData = result.rows.item(i)["id"] + "&nbsp;&nbsp;" + 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>

完！