html5本地数据库示例
2014-02-13 14:36
267 查看
js部分：
(function(){
var db={};
var DB=null;
function support(){
if(!window.openDatabase){
alert('not support the DB');
return false;
}else{
return true;
}
}
if(!support()){
return;
}
db.creatDB=function(name, version, displayName, maxSize){
DB=openDatabase(name, version, displayName, maxSize);
}
db.createTable=function(tname, items){
var query ="create table if not exists "+tname+" ("+items+")";
DB.transaction(function(tx){
tx.executeSql(query);
});
}
db.insert=function(tname, value){
DB.transaction(function(tx){
if(value instanceof Array){
for(var i=0, len=value.length; i<len; i++){
var singleArr='';
for(pro in value[i]){
if(!value[i][pro]){
singleArr+=",' '";
}else if(isNaN(value[i][pro])){
singleArr+=",'"+value[i][pro]+"'";
}else{
singleArr+=","+value[i][pro];
}
}
singleArr=singleArr.slice(1);
var query="insert into "+tname+" values("+singleArr+")";
console.log(query);
tx.executeSql(query);
}
}else if(value instanceof Object){
var singleArr='';
for(pro in value){
if(!value[pro]){
singleArr+=",' '";
}else if(isNaN(value[pro])){
singleArr+=",'"+value[pro]+"'";
}else{
singleArr+=","+value[pro];
}
}
singleArr=singleArr.slice(1);
tx.executeSql("insert into "+tname+" values("+singleArr+")");
}
});
}
db.selectq=function(tname,callback){
DB.transaction(function(tx){
tx.executeSql("select * from "+tname,[],callback);
});
}
db.detable=function(tname){
DB.transaction(function(tx){
tx.executeSql("drop table "+tname);
});
}
window.theDB=db;
})();
function callbackT(tx,result){
var htm="<table border='1' cellspacing='1'><th>Name</th><th>Value</th>";
for(var i=0;i<result.rows.length;i++){
var item=result.rows.item(i);
htm+="<tr><td width='100'>"+item.name+"</td><td width='100'>"+item.value+"</td></tr>"
}
htm+="</table>";
document.getElementById("result").innerHTML=htm;
}
$(document).ready(function(e) {
theDB.creatDB('db','1.0','my database',2*1024*1024);
$("#deTable").click(function(){
theDB.detable('test');
});
$("#addInfo").click(function(){
theDB.insert('test',[{name:'jhon', value:'one'},{name:'alice',value:'two'},{name:'lilei',value:'tree'}]);
})
$("#addTable").click(function(){
theDB.createTable('test', "name, value");
});
$("#showData").click(function(){
theDB.selectq('test',callbackT);
})
});
html部分：
<body>
<h1>Web SQL Database</h1>
<div id="info">test info</div>
<div id="result"></div>
<div><span id="deTable">删除数据表格 </span><span id="addTable"> 添加表格 </span><span id="addInfo"> 添加数据到表格</span><span id="showData">数据展示</span></div>
</body>
(function(){
var db={};
var DB=null;
function support(){
if(!window.openDatabase){
alert('not support the DB');
return false;
}else{
return true;
}
}
if(!support()){
return;
}
db.creatDB=function(name, version, displayName, maxSize){
DB=openDatabase(name, version, displayName, maxSize);
}
db.createTable=function(tname, items){
var query ="create table if not exists "+tname+" ("+items+")";
DB.transaction(function(tx){
tx.executeSql(query);
});
}
db.insert=function(tname, value){
DB.transaction(function(tx){
if(value instanceof Array){
for(var i=0, len=value.length; i<len; i++){
var singleArr='';
for(pro in value[i]){
if(!value[i][pro]){
singleArr+=",' '";
}else if(isNaN(value[i][pro])){
singleArr+=",'"+value[i][pro]+"'";
}else{
singleArr+=","+value[i][pro];
}
}
singleArr=singleArr.slice(1);
var query="insert into "+tname+" values("+singleArr+")";
console.log(query);
tx.executeSql(query);
}
}else if(value instanceof Object){
var singleArr='';
for(pro in value){
if(!value[pro]){
singleArr+=",' '";
}else if(isNaN(value[pro])){
singleArr+=",'"+value[pro]+"'";
}else{
singleArr+=","+value[pro];
}
}
singleArr=singleArr.slice(1);
tx.executeSql("insert into "+tname+" values("+singleArr+")");
}
});
}
db.selectq=function(tname,callback){
DB.transaction(function(tx){
tx.executeSql("select * from "+tname,[],callback);
});
}
db.detable=function(tname){
DB.transaction(function(tx){
tx.executeSql("drop table "+tname);
});
}
window.theDB=db;
})();
function callbackT(tx,result){
var htm="<table border='1' cellspacing='1'><th>Name</th><th>Value</th>";
for(var i=0;i<result.rows.length;i++){
var item=result.rows.item(i);
htm+="<tr><td width='100'>"+item.name+"</td><td width='100'>"+item.value+"</td></tr>"
}
htm+="</table>";
document.getElementById("result").innerHTML=htm;
}
$(document).ready(function(e) {
theDB.creatDB('db','1.0','my database',2*1024*1024);
$("#deTable").click(function(){
theDB.detable('test');
});
$("#addInfo").click(function(){
theDB.insert('test',[{name:'jhon', value:'one'},{name:'alice',value:'two'},{name:'lilei',value:'tree'}]);
})
$("#addTable").click(function(){
theDB.createTable('test', "name, value");
});
$("#showData").click(function(){
theDB.selectq('test',callbackT);
})
});
html部分：
<body>
<h1>Web SQL Database</h1>
<div id="info">test info</div>
<div id="result"></div>
<div><span id="deTable">删除数据表格 </span><span id="addTable"> 添加表格 </span><span id="addInfo"> 添加数据到表格</span><span id="showData">数据展示</span></div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5本地数据库（SQLite）示例
- HTML5 本地数据库（SQLite） 示例 推荐
- HTML5 本地数据库（SQLite） 示例 4000
- HTML5 — Wed SQL 本地数据库示例
- HTML5 本地数据库（SQLite） 示例
- (转)HTML5 本地数据库（SQLite） 示例
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
- HTML5创建本地数据库
- Sencha Touch 2 结合HTML5的本地存储创建数据库实现增、删、改、查
- Sencha Touch 2 结合HTML5的本地存储创建数据库实现增、删、改、查
- html5 本地数据库-Web SQL Database
- ssm框架上传图片保存到本地和数据库示例
- HTML5 内置本地数据库之Sqlite
- html5中本地数据库的基本概念
- 【HTML5初探之本地存储】如果没有数据库。。。
- （二）HTML5 - Web SQL 本地数据库
- Html5——本地数据库
- HTML5本地数据库(WebSQL)[转]
- Html5访问本地数据库sqlite