首页 > 代码库 > PhoneGap下Web SQL实践
PhoneGap下Web SQL实践
HTML5里的Web SQL数据库，内置了SQLite数据库，
对数据库的操作使用executeSql执行增删改查
1. 创建数据库
function creatDatabase(){ db = openDatabase(‘Student‘, ‘1.0‘, ‘StuManage‘, 2 * 1024 * 1024); }
2. 创建表
function createTable(){ if (db) { var strSQL = "create table if not exists StuInfo "; strSQL += " (StuID unique,Name text,Sex text,Score int)"; db.transaction(function(tx) { tx.executeSql(strSQL) }, function() { console.log("创建表错误"); }, function() { console.log("创建表成功"); }) }
3. 增加数据
function addData() { if (db) { var strSQL = "insert into StuInfo values"; strSQL += "(?,?,?,?)"; db.transaction(function(tx) { tx.executeSql(strSQL,[ $$("txtStuID").value,$$("txtName").value, $$("selSex").value,$$("txtScore").value ], function(){ $$("txtName").value=""; $$("txtScore").value=""; alert("成功增加1条记录!"); }, function(tx,ex){ console.log(ex.message) }) }) }}
4. 查询数据
function queryData(){ if(db){ var sql = "select * from StuInfo"; db.transaction(function(tx) { tx.executeSql(sql,[], function(tx, results){ var len = results.rows.length,i; var htmlDatahttp://www.mamicode.com/= ""; for(i = 0; i < len; i++){ var item = results.rows.item(i); var htmlitem = item.StuID + " " + item.Name + " " + item.Sex + " " + item.Score; htmlData += htmlitem + "</br> "; } $$("info").innerHTML = htmlData; }, function(tx,ex){ console.log(ex.message) }) }) }}
5. 删除数据
function deleteData(){ if (db) { var strSQL = "delete from StuInfo where StuID = ?"; db.transaction(function(tx) { tx.executeSql(strSQL,[ $$("txtStuID").value ], function(){ alert("成功删除1条记录!"); }, function(tx,ex){ console.log(ex.message) }) }) } queryData();}
完整的Code如下
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> <meta http-equiv="Content-Security-Policy" content="default-src * ‘unsafe-inline‘; style-src ‘self‘ ‘unsafe-inline‘; media-src *" /> <link rel="stylesheet" href="http://www.mamicode.com/css/jquery.mobile-1.4.5.min.css"> <script type="text/javascript" src="http://www.mamicode.com/js/jquery.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" charset="utf-8" src="http://www.mamicode.com/cordova.js" ></script> <title>Hello World</title><script type="text/javascript" charset="utf-8">function $$(id) { return document.getElementById(id);} var db; document.addEventListener(‘deviceready‘, onDeviceReady, false); function onDeviceReady(){ var db = creatDatabase(); createTable(); queryData(); } function creatDatabase(){ db = openDatabase(‘Student‘, ‘1.0‘, ‘StuManage‘, 2 * 1024 * 1024); } function createTable(){ if (db) { var strSQL = "create table if not exists StuInfo "; strSQL += " (StuID unique,Name text,Sex text,Score int)"; db.transaction(function(tx) { tx.executeSql(strSQL) }, function() { console.log("创建表错误"); }, function() { console.log("创建表成功"); }) }}function addData() { if (db) { var strSQL = "insert into StuInfo values"; strSQL += "(?,?,?,?)"; db.transaction(function(tx) { tx.executeSql(strSQL,[ $$("txtStuID").value,$$("txtName").value, $$("selSex").value,$$("txtScore").value ], function(){ $$("txtName").value=""; $$("txtScore").value=""; alert("成功增加1条记录!"); }, function(tx,ex){ console.log(ex.message) }) }) } queryData();}function queryData(){ if(db){ var sql = "select * from StuInfo"; db.transaction(function(tx) { tx.executeSql(sql,[], function(tx, results){ var len = results.rows.length,i; var htmlDatahttp://www.mamicode.com/= ""; for(i = 0; i < len; i++){ var item = results.rows.item(i); var htmlitem = item.StuID + " " + item.Name + " " + item.Sex + " " + item.Score; htmlData += htmlitem + "</br> "; } $$("info").innerHTML = htmlData; }, function(tx,ex){ console.log(ex.message) }) }) }}function deleteData(){ if (db) { var strSQL = "delete from StuInfo where StuID = ?"; db.transaction(function(tx) { tx.executeSql(strSQL,[ $$("txtStuID").value ], function(){ alert("成功删除1条记录!"); }, function(tx,ex){ console.log(ex.message) }) }) } queryData();} </script></head><body><div id="page1" data-role="page" data-add-back-btn="true"> <div data-role="content"> <fieldset> <legend>新增学生资料</legend> <span class="spanl"> 学号：<input type="text" id="txtStuID" size="10"><br> 姓名：<input type="text" id="txtName" size="15"> </span> <span> 性别：<select id="selSex"> <option value="http://www.mamicode.com/男">男</option> <option value="http://www.mamicode.com/女">女</option> </select><br> 总分：<input type="text" id="txtScore" size="8"> </span> <p class="btn"> <input id="btnAdd" type="button" value="http://www.mamicode.com/提交" onClick="addData();"> </p> </fieldset> <p id="info">显示结果</p> <input type="button" value="http://www.mamicode.com/删除记录" onClick="deleteData();"> </div></div></body></html>
PhoneGap下Web SQL实践
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。