html5-本地数据库添加、查询、删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//创建数据库：数据库名称，版本，表明，大小
var db=openDatabase("myDB","1.0","test db",2014*10);
function Add(){
db.transaction(function(fx){
fx.executeSql("create table if not exists UserInfor(UserName TEXT,Pwd TEXT)",[]);
//获取
var username=$("#txtAUserName").val();
var pwd=$("#txtAPwd").val();
fx.executeSql("insert into UserInfor values(?,?)",[username,pwd],function(){
alert("添加成功");
});
});
}
function Sel(){
var sql=" select * from UserInfor where 1=1 ";
var username=$("#txtSUserName").val();
if(username!=""){
sql +="and UserName = '"+username+"'";
}
db.transaction(function(fx){
$("#dCon").html("");
fx.executeSql(sql,[],function(fx,rs){
for(var i=0;i<rs.rows.length;i++){
var s="<div>"+rs.rows.item(i).UserName+" "+rs.rows.item(i).Pwd+"</div>";
$("#dCon").append(s);
}
});
});
}
function Del(){
db.transaction(function(fx){
var username=$("#txtDUserName").val();
fx.executeSql("delete from UserInfor where UserName = ?",[username],function(){
alert(username);
alert("删除成功");
Sel();
});
});
}
</script>
</head>
<body>
<div><input type="text" id="txtAUserName"/> <input type="password" id="txtAPwd"/> <input type="button" value="添加" onclick="Add();"/> </div>
<div><input type="text" id="txtSUserName"/> <input type="button" value="查询" onclick="Sel();"/> </div>
<div><input type="text" id="txtDUserName"/> <input type="button" value="删除" onclick="Del();"> </div>
<div id="dCon"></div>
</body>
</html>
