码迷,mamicode.com
首页 > 数据库 > 详细

html5-本地数据库的操作

时间:2017-04-07 22:55:23      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:新建   删除   数据库   button   cli   情况   大小   tab   insert   

<script src="jquery-1.8.3.js"></script>
<script>
/* IE11不支持此操作
创建数据库
解释一下openDatabase方法打开一个已经存在的数据库,如果数据库不存在,它还可以创建数据库。几个参数意义分别是:
1,数据库名称。
2,版本号 目前为1.0,不管他,写死就OK。
3,对数据库的描述。
4,设置数据的大小。
5,回调函数(可省略)。
*/
var db=openDatabase("myDB","1.0","testDB",1024*1024,function(){});
//添加
function add()
{
    var username=$("#username").val();
    var pwd=$("#pwd").val();
    //transaction:这个方法允许我们根据情况控制事务提交或回滚。
    db.transaction(function(fx){
        //executeSql执行SQL语句创建表,并新建字段
        fx.executeSql("create table if not exists UserInfo(UserName TEXT,Pwd TEXT)",[]);
        fx.executeSql("insert into UserInfo values(?,?)",[username,pwd],function(){
            alert("添加成功")
            },function(){
            alert("添加失败");
                })
        })
    
}
//获取
function get()
{
    var username=$("#username").val();
    db.transaction(function(fx){
        //也可以用select * from UserInfo where UserName=‘"+username+"‘
        fx.executeSql("select * from UserInfo where UserName=?",[username],function(fx,rs){
            if(rs)
            {
                for(var i=0;i<rs.rows.length;i++)
                {
                    var str="<p>用户名:"+rs.rows.item(i).UserName+"&nbsp;&nbsp;密码:"+rs.rows.item(i).Pwd+"</p>";
                    $("#content").append(str);
                }            
            }
            
            });
        })

}
//删除
function del()
{
    var username=$("#username").val();
    db.transaction(function(fx){
        fx.executeSql("delete from UserInfo where UserName=?",[username],function(fx,rs){
            alert("删除成功");
            get();
            });
        })

}

</script>
<body>
<input type="text" id="username">
<input type="text" id="pwd">
<input type="button" onClick="add()" value="添加">
<input type="button" onClick="get()" value="获取">
<input type="button" onClick="del()" value="删除">
<div id="content"></div>

html5-本地数据库的操作

标签:新建   删除   数据库   button   cli   情况   大小   tab   insert   

原文地址:http://www.cnblogs.com/bk7788/p/6680317.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!