html5之本地数据库
生活随笔
收集整理的這篇文章主要介紹了
html5之本地数据库
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="jquery.1.4.2.min.js"></script>
<script type="text/javascript">
//創建本地數據庫
var db=openDatabase("myDB","1.0","test db",2014*10); //創建數據庫對象； 數據庫名稱：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=$("#txtPwd").val();
// 添加
if(username=="" || pwd==""){
alert("不能為空")
}else{
fx.executeSql("insert into UserInfor values(?,?)",[username,pwd],function(){
alert("添加成功")
});
}
});
}
// 查詢
function Sel(){
var sql="select * from UserInfor where 1=1"; //加where 1=1的目的，加上的話，不管下面if成不成立，這條執行語句都成立
var username=$("#txtSUserName").val();
if(username!=""){
sql += " and UserName='" + username +"'"; //例：username=aaaa select * from UserInfor where 1=1 and UserName='aaaa'
// console.log(sql)
}
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("刪除成功");
Sel();
});
})
}
// 刪除所有數據
function DelAll(){
db.transaction(function(fx){
// var sql=$("#txtKUserName").val();
fx.executeSql("delete from UserInfor",[],function(){
alert("刪除庫成功");
})
});
}
</script>
<title></title>
</head>
<body>
<div><input type="text" id="txtAUserName"><input type="password" id="txtPwd"><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><input type="text" id="txtKUserName"><input type="button" value="刪除數據庫" onclick="DelAll()"></div>
<div id="dCon"></div>
</body>
</html>
總結
以上是生活随笔為你收集整理的html5之本地数据库的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ABAP workbench API的使
- 下一篇： 用ABAP代码实现从1累加到100