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>