HTML5里的Web SQL数据库，内置了SQLite数据库，

对数据库的操作使用executeSql执行增删改查

1. 创建数据库

  1. function creatDatabase(){
  2.       db = openDatabase('Student', '1.0', 'StuManage', 2 * 1024 * 1024);
  3.  }

　

2. 创建表

  1. function createTable(){
  2.  
  3. 	if (db) {
  4.         var strSQL = "create table if not exists StuInfo ";
  5.         strSQL += " (StuID unique,Name text,Sex text,Score int)";
  6.         db.transaction(function(tx) {
  7.             tx.executeSql(strSQL)
  8.         },
  9.         function() {
  10.             console.log("创建表错误");
  11.         },
  12.         function() {
  13.             console.log("创建表成功");
  14.         })
  15.     }

　　

3. 增加数据

  1. function addData() {
  2.     if (db) {
  3.  
  4.         var strSQL = "insert into StuInfo values";
  5.         strSQL += "(?,?,?,?)";
  6.         db.transaction(function(tx) {
  7.             tx.executeSql(strSQL,[
  8. 			    $$("txtStuID").value,$$("txtName").value,
  9. 			    $$("selSex").value,$$("txtScore").value
  10. 			],
  11. 			function(){
  12. 				$$("txtName").value="";
  13. 	            $$("txtScore").value="";
  14. 			    alert("成功增加1条记录!");
  15. 			},
  16. 			function(tx,ex){
  17. 			     console.log(ex.message)
  18. 			})
  19.         })
  20.  
  21.     }
  22.  
  23. }

　

4. 查询数据

  1. function queryData(){
  2.     if(db){
  3.         var sql = "select * from StuInfo";
  4.          db.transaction(function(tx) {
  5.             tx.executeSql(sql,[],
  6. 			function(tx, results){
  7. 				var len = results.rows.length,i;
  8. 				var htmlData = "";
  9. 				for(i = 0; i < len; i++){
  10. 				    var item = results.rows.item(i);
  11. 				    var htmlitem = item.StuID + " " + item.Name + " " + item.Sex + " " + item.Score;
  12. 				    htmlData += htmlitem + "</br> ";
  13.  
  14. 				}
  15. 				$$("info").innerHTML = htmlData;
  16. 			},
  17. 			function(tx,ex){
  18. 			     console.log(ex.message)
  19. 			})
  20.         })
  21.     }
  22. }

　　

5. 删除数据

  1. function deleteData(){
  2.     if (db) {
  3.  
  4.         var strSQL = "delete from StuInfo where StuID = ?";
  5.         db.transaction(function(tx) {
  6.             tx.executeSql(strSQL,[
  7. 			    $$("txtStuID").value
  8. 			],
  9. 			function(){
  10. 			    alert("成功删除1条记录!");
  11. 			},
  12. 			function(tx,ex){
  13. 			     console.log(ex.message)
  14. 			})
  15.         })
  16.  
  17.     }
  18.  
  19.      queryData();
  20. }

　　

完整的Code如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="format-detection" content="telephone=no" />
  6.     <meta name="msapplication-tap-highlight" content="no" />
  7.     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
  8.     <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
  9.     <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
  10.     <script type="text/javascript" src="js/jquery.js"></script>
  11.     <script  type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
  12.     <script type="text/javascript" charset="utf-8" src="cordova.js" ></script>
  13.     <title>Hello World</title>
  14.  
  15. <script type="text/javascript" charset="utf-8">
  16. function $$(id) {
  17.     return document.getElementById(id);
  18. }
  19.         var db;
  20.         document.addEventListener('deviceready', onDeviceReady, false);
  21.         function onDeviceReady(){
  22.             var db = creatDatabase();
  23.             createTable();
  24.             queryData();
  25.         }
  26.  
  27.  function creatDatabase(){
  28.       db = openDatabase('Student', '1.0', 'StuManage', 2 * 1024 * 1024);
  29.  }
  30.  
  31.  function createTable(){
  32.  
  33. 	if (db) {
  34.         var strSQL = "create table if not exists StuInfo ";
  35.         strSQL += " (StuID unique,Name text,Sex text,Score int)";
  36.         db.transaction(function(tx) {
  37.             tx.executeSql(strSQL)
  38.         },
  39.         function() {
  40.             console.log("创建表错误");
  41.         },
  42.         function() {
  43.             console.log("创建表成功");
  44.         })
  45.     }
  46. }
  47.  
  48. function addData() {
  49.     if (db) {
  50.  
  51.         var strSQL = "insert into StuInfo values";
  52.         strSQL += "(?,?,?,?)";
  53.         db.transaction(function(tx) {
  54.             tx.executeSql(strSQL,[
  55. 			    $$("txtStuID").value,$$("txtName").value,
  56. 			    $$("selSex").value,$$("txtScore").value
  57. 			],
  58. 			function(){
  59. 				$$("txtName").value="";
  60. 	            $$("txtScore").value="";
  61. 			    alert("成功增加1条记录!");
  62. 			},
  63. 			function(tx,ex){
  64. 			     console.log(ex.message)
  65. 			})
  66.         })
  67.  
  68.     }
  69.  
  70.     queryData();
  71. }
  72.  
  73. function queryData(){
  74.     if(db){
  75.         var sql = "select * from StuInfo";
  76.          db.transaction(function(tx) {
  77.             tx.executeSql(sql,[],
  78. 			function(tx, results){
  79. 				var len = results.rows.length,i;
  80. 				var htmlData = "";
  81. 				for(i = 0; i < len; i++){
  82. 				    var item = results.rows.item(i);
  83. 				    var htmlitem = item.StuID + " " + item.Name + " " + item.Sex + " " + item.Score;
  84. 				    htmlData += htmlitem + "</br> ";
  85.  
  86. 				}
  87. 				$$("info").innerHTML = htmlData;
  88. 			},
  89. 			function(tx,ex){
  90. 			     console.log(ex.message)
  91. 			})
  92.         })
  93.     }
  94. }
  95.  
  96. function deleteData(){
  97.     if (db) {
  98.  
  99.         var strSQL = "delete from StuInfo where StuID = ?";
  100.         db.transaction(function(tx) {
  101.             tx.executeSql(strSQL,[
  102. 			    $$("txtStuID").value
  103. 			],
  104. 			function(){
  105. 			    alert("成功删除1条记录!");
  106. 			},
  107. 			function(tx,ex){
  108. 			     console.log(ex.message)
  109. 			})
  110.         })
  111.  
  112.     }
  113.  
  114.      queryData();
  115. }
  116.  
  117.     </script>
  118. </head>
  119.  
  120. <body>
  121. <div id="page1" data-role="page" data-add-back-btn="true">
  122.     <div data-role="content">
  123.         <fieldset>
  124.             <legend>新增学生资料</legend>
  125.             <span class="spanl">
  126.             学号：<input type="text" id="txtStuID" size="10"><br>
  127.             姓名：<input type="text" id="txtName"  size="15">
  128.             </span>
  129.             <span>
  130.             性别：<select id="selSex">
  131.               <option value="男">男</option>
  132.               <option value="女">女</option>
  133.             </select><br>
  134.             总分：<input type="text" id="txtScore"  size="8">
  135.             </span>
  136.             <p class="btn">
  137.                 <input id="btnAdd" type="button" value="提交"  onClick="addData();">
  138.             </p>
  139.  
  140.         </fieldset>
  141.         <p id="info">显示结果</p>
  142.         <input  type="button" value="删除记录"  onClick="deleteData();">
  143.     </div>
  144. </div>
  145.  
  146. </body>
  147.  
  148. </html>

　　

PhoneGap下Web SQL实践的更多相关文章

  1. Phonegap下localStorage使用实践

    HTML5的Web Storage API提供了两种客户端存储数据的方法 localStorage和sessionStorage. localStorage没有时间限制,程序升级也不会消失,可以满足持 ...

  2. Java JDBC下执行SQL的不同方式、参数化预编译防御

    相关学习资料 http://zh.wikipedia.org/wiki/Java数据库连接 http://lavasoft.blog.51cto.com/62575/20588 http://blog ...

  3. 20155326《网路对抗》Exp8 WEB基础实践

    20155326<网路对抗>Exp8 WEB基础实践 实践内容 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写 ...

  4. 20145236《网络对抗》Exp8 WEB基础实践

    20145236<网路对抗>Exp8 WEB基础实践 一.基础问题回答 什么是表单 表单在网页中主要负责数据采集功能 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框. ...

  5. 20155206 Exp8 WEB基础实践

    20155206 Exp8 WEB基础实践 基础问题回答 (1)什么是表单 表单在网页中主要负责数据采集功能. 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以 ...

  6. 20155210 Exp8 WEB基础实践

    Exp8 WEB基础实践 Apache环境配置 apache是kali下的web服务器,通过访问ip地址+端口号+文件名称可以打开对应的网页. 输入命令vi /etc/apache2/ports.co ...

  7. 20155216 Exp8 WEB基础实践

    Exp8 WEB基础实践 实践内容 Apache环境配置 apache是kali下的web服务器,通过访问 ip地址+端口号+文件名称 打开对应的网页. 输入命令 vi /etc/apache2/po ...

  8. 20155223 Exp8 WEB基础实践

    20155223 Exp8 WEB基础实践 基础问题回答 什么是表单? 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素. 表单使 ...

  9. 20155317王新玮《网络对抗技术》实验8 WEB基础实践

    20155317王新玮<网络对抗技术>实验8 WEB基础实践 一.实验准备 1.0 实验目标和内容 Web前端HTML.能正常安装.启停Apache.理解HTML,理解表单,理解GET与P ...

随机推荐

  1. constructor-arg和property的区别

    两者都是给bean注入属性,区别: constructor-arg:通过构造函数注入. property:通过setter对应的方法注入. 详情见:https://blog.csdn.net/u012 ...

  2. Dijkstra算法补分

    要求 Dijkstra算法,求解附图顶点A的单源最短路径 在纸上画出求解过程,上传截图(注意图上要有自己的学号和姓名) 过程

  3. 解决应用程序无法正常启动0xcxxxxxxxxxx问题

    简述:使用VS2008写了一个MFC程序,结果传到别人的机子上(WIN7)出现应用程序正常初始化(0xc0150002)失败的问题.为什么我的机子上可以,而别人的机子上运行不了呢?下面是我找到的一个解 ...

  4. HDU 4745 Two Rabbits（最长回文子序列）

    http://acm.hdu.edu.cn/showproblem.php?pid=4745 题意: 有一个环,现在有两只兔子各从一个点开始起跳,一个沿顺时针,另一个沿逆时针,只能在一圈之内跳,并且每 ...

  5. python 输出两个日期之间的天数

    from datetime import date f_date = date(, , ) l_date = date(, , ) delta = l_date - f_date print(delt ...

  6. 2018-2019-2 20165332《网络攻防技术》Exp5 MSF基础应用

    2018-2019-2 20165332<网络攻防技术>Exp5 MSF基础应用 1.基础问题回答 用自己的话解释什么是exploit,payload,encode. exploit:就是 ...

  7. 转：Tomcat 7.0配置SSL的问题及解决办法

    原文:https://dong-shuai22-126-com.iteye.com/blog/1830209

  8. windows下的IO模型之完成端口

    本文整理于:http://blog.csdn.net/piggyxp/article/details/6922277 一． 完成端口的优点 完成端口会充分利用Windows内核来进行I/O的调度,是用 ...

  9. js使用post 方式打开新窗口，隐藏Url参数

    要想在地址栏隐藏url传递的参数,不能直接隐藏,但有几下几个变通的方法. 使用类似Base64编码,将URL参数进行简单加密. 使用框架页; 使用POST方式传递数据; 使用Cookie传递数据; 下 ...

  10. asp.net验证码图片生成示例

    验证码,一个很常见的东西.不管你是使用者还是开发者,这个东西80%的人都见到过,但是之前有人给我说过这么一句话“内行看门道,外行看热闹!”,仔细琢磨一下还真的是那么一回事.对于怎么实现验证码,闲话不多 ...