html5学习(websql)

比眉伴天荒 2023-01-01 01:49 154阅读 0赞

> **目前只有谷歌的Chrome浏览器支持websql，其他浏览器暂不支持websql。**
> 
> **大家测试的时候，请使用Chrome浏览器。**

** html5中的websql，类似于数据库，语法跟数据库中的语法差不多。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

<!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>

**完！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221120/0d7c3bb4769f449a80b6ab656fb11c38.png