HTML5本地存储之Web SQL Database

最新推荐文章于 2020-02-04 11:53:33 发布

D灿

最新推荐文章于 2020-02-04 11:53:33 发布

阅读量889

点赞数

分类专栏： HTML网页编程 Web前端技术文章标签： html5 网页 WebSQL

本文链接：https://blog.csdn.net/zuosixiaonengshou/article/details/71911704

版权

Web前端技术同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

HTML网页编程

11 篇文章 0 订阅

订阅专栏

本文章是接着上一篇文章接着写的。

简介

如果是要本地浏览器保存复杂的数据，则可以借助Web SQL Database API来实现，可以使用的SQL语句完场复杂数据的存储与查询。

Web SQL Database 规范使用的是SQLite数据库，它允许应用程序通过一个异步的JavaScripte接口访问数据库。虽然Web SQL不属于HTML5规范，而且HTML5最终也不会选择它，但是对于移动领域是非常有用的，以为在任何情况下，SQLAPI在数据库中的数据处理能力都是无法比拟的。

简单入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hello world</title>
		<script type="text/javascript">
			//1.打开数据库，该方式有五个参数，第一个参数表示数据库名，第二个参数表示版本号，第三个参数表示数据库的描述，第四个参数表示数据库的大小，第五个参数表示创建回调函数
			var db=openDatabase("TestDB","1.0","测试数据库",2*1024*1024);
			//2.创建数据表
			db.transaction(function(tx){
				tx.executeSql("create table if not exists UserName (id unqiue,Name)");
				//3.添加数据至数据表
				tx.executeSql("insert into UserName(id,name) values (1,'张三')");
				tx.executeSql("insert into UserName(id,name) values (2,'李四')");
			});
			//4. 读取数据库中的数据
			db.transaction(function (tx){
				tx.executeSql("select * from UserName",[],function(tx,results){
					var len=results.rows.length;
					for(var i=0;i<len;i++)
						console.log(results.rows.item(i).Name);
				},null);
			});
		</script>
	</head>
	<body>
		
	</body>
</html>

可以说使用起来还是挺简单容易上手的。

实战：基本的数据库操作实例

案例简介：

设计一个简易的管理界面，包含一个填写姓名的组件，并有一个查询按钮，可以查询Web SQL数据库中的数据。添加按钮可以添加数据，如果单击列表中的编辑，则表单会对该项进行编辑更新，实际效果如果所示：

代码实现

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>本地数据访问实例e</title>
	<script type="text/javascript">
		//初始化页面的脚本  1.打开数据库  2. 创建/打开数据表
		//打开数据库，如果不存在则创建
		var db=openDatabase("TestDB","1.0","测试数据库",2*104*1024);
		//创建/打开数据表,如果存在则不创建
		db.transaction(function(tx){
			tx.executeSql("create table if not exists UserName(id unique,Name)");
		});
		
		//实现查询数据
		function Query(){
			var name=document.getElementById("name");
			db.transaction(function(tx){
				tx.executeSql("select * from UserName where Name like'%"+name.value+"%' order by id desc ",[],function(tx,results){
					var len=results.rows.length;
					var msg="";
					for(var i=0;i<len;i++){
						msg+="<li> ";
						msg+="<span>"+results.rows.item(i).Name+"</span>";
						msg+="<a href='###' οnclick=\" SetForm('"+results.rows.item(i).id+"','"+results.rows.item(i).Name+"') \">编辑</a> "; 
						msg+="<a href='###' οnclick='Delete("+results.rows.item(i).id+")'>删除</a>";
						msg+="</li>";
					}
					document.getElementById("msg").innerHTML=msg;
				},null);
			});
		}

	    //初始化表单
		function SetForm(id,name){
			if(id){
				document.getElementById("id").value=id;
				document.getElementById("name").value=name;
				document.getElementById("submit").οnclick=function(){Update();};
				document.getElementById("submit").innerHTML="更新";
			}else{
				document.getElementById("id").value="";
				document.getElementById("name").value="";
				document.getElementById("submit").οnclick=function(){Insert();};
				document.getElementById("submit").innerHTML="添加";
			}
		}
	</script>
	<script type="text/javascript">
		function Insert(){
			//添加数据
			var name=document.getElementById("name").value;
			if(name=="") return;  //没有值，则不处理
			//获取可用的最小id值
			var maxid;
			db.transaction(function(tx){
				tx.executeSql("select id from UserName order by id desc",[],function(tx,result){
					if(result.rows.length)
						maxid=parseInt(result.rows.item(0).id)+1;
					else
						maxid=1;
				},null);
			});
			//添加一条数据，并更新显式
			db.transaction(function(tx){
				tx.executeSql("insert into UserName(id,name) values('"+maxid+"','"+name+"')",[],function(tx,result){
					SetForm();
					Query();
				});
			});
		}
		//更新数据
		function Update(){
			db.transaction(function(tx){
				var id=document.getElementById("id").value;
				var name=document.getElementById("name").value;
				console.log(name);
				tx.executeSql("update UserName set Name='"+name+"' where id='"+id+"'",[],function(tx,result){
					SetForm();
					Query();
				});
			});
		}
		//删除数据
		function Delete(id){
			db.transaction(function(tx){
				tx.executeSql("delete from UserName where id='"+id+"'",[],function(tx,results){
					SetForm();
					Query();
				});
			});
		}
	</script>
	</head>
	<body>
		<input type="hidden" id="id">
		<input type="text" id="name" placeholder="请输入姓名"/>
		<button οnclick="Insert()" id="submit">添加</button>
		<button οnclick="Query()">查询</button><br/>
		<ul id="msg"></ul>
	</body>
</html>

至此，与数据库有关的基本操作完成，我们可以在运行的页面上实现数据的添加、修改、删除和查询。