标签：button utf-8 splay database 页面 callback return span []
websql存储方式一共有以下几个方法
openDatabase:这个方法使用现有的数据库或新建数据库来创建数据库对象。
transaction：这个方法允许我们执行事务处理;
executeSql:这个方法用于执行sql语句;
1 var db = openDatabase(name,version,displayName,estimateSize,creationCallback);
name:数据库的名字;
version:数据库的版本号;
displayName:数据库的描述;
estimateSize:数据库保存数据的大小;
createCallback:回调函数：
2 调用transaction来执行sql语句
transaction(function(tx){})
tx:回调函数所接收的参数，此参数为transaction对象的引用。
3 调用executeSql 方法来表示处理事务
transaction.executeSql(sql,[],dataHandler,errorHandler);
sql:要执行的sql语句;
[ ]:sql语句中的占位符“？”所对应的参数。
dataHandler：执行sql语句成功时调用的回调函数：
errorHandler:执行sql语句失败时调用的回调函数。
先贴代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webSQL</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//初始化数据库
function initDatabase(){
var db =getCurrentDB();
if(!db){
alert(‘您的浏览器不支持HTML本地数据库‘);
return ;
}
db.transaction(function(trans){
trans.executeSql(‘create table if not exists Demo(uName text null,title text null,words text null)‘,[],function(trans,result){},
function(trans,message){
});
})
}
//创建数据库
function getCurrentDB(){
var db = openDatabase(‘data.db‘,‘1.0‘,‘demo data‘,1024*1024);
return db;
}
$(function(){
//初始化数据库
initDatabase();
$("#save").on(‘click‘,function(){
var txtName = $(‘#userName‘).val();
var txtTitle= $(‘#userTitle‘).val();
var txtWords = $(‘#userContent‘).val();
//执行sql脚本来插入数据
var db = getCurrentDB();
db.transaction(function(trans){
trans.executeSql(‘insert into Demo(uName,title,words)values(?,?,?)‘,[txtName,txtTitle,txtWords],function(ts,data){},function(ts,message){
alert(message);
})
})
})
//将数据展示到表格中
$("#showContent").on(‘click‘,function(){
showAllTheData();
});
//显示所有数据库中的数据到页面中
function showAllTheData(){
$(‘#showTable‘).empty();
var db =getCurrentDB();
db.transaction(function(trans){
trans.executeSql(‘select * from Demo‘,[],function(ts,data){
if(data){
//循环记录中的数据
for(var i=0;i<data.rows.length;i++){
//获取每一行数据的json对象（键值对组成),将数据拼接成表格中的一行行数据
appendDataToTable(data.rows.item(i));
}
}
},function(ts,message){
alert(message);
})
})
}
function appendDataToTable(data){
var txtName =data.uName;
var txtTitle =data.title;
var txtWords =data.words;
var strHTML =‘‘;
strHTML+=‘<tr>‘;
strHTML += "<td>"+txtName+"</td>";
strHTML += "<td>"+txtTitle+"</td>";
strHTML += "<td>"+txtWords+"</td>";
strHTML+=‘</tr>‘;
$("#showTable").append(strHTML);
}
})
</script>
</head>
<body>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="userName"/></td>
</tr>
<tr>
<td>标题:</td>
<td><input type="text" id="userTitle"/></td>
</tr>
<tr>
<td>留言:</td>
<td><input type="text" id="userContent"/></td>
</tr>
</table>
<input type="button" id="save" value="保存" />
<input type="button" id="showContent" value="展示你的信息"/>
<table id =‘showTable‘>
</table>
</body>
</html>
标签：button utf-8 splay database 页面 callback return span []
原文地址：http://www.cnblogs.com/crazycode2/p/6834381.html
