html如何操作“SQLLITE”文件型SQL数据库

1. 创建访问数据库的对象

var db=openDatabase("mydb",'1.0','test db',102400)

第一个参数为 数据库名

第二个参数为 版本号

第三个参数为 数据库描述

第四个参数 数据库的大小

2. 使用事务处理

db.transaction(function(tx){
tx.executeSql(sqlQuery,[],dataHandler,errorHandler);
});
tx.executeSql(sqlQuery,[],dataHandler,errorHandler)

第一个参数是要执行的sql语句

第二个参数为sql语句中所使用的参数数组

第三个参数是执行sql成功时所调用的回调函数

第四个参数是执行sql失败时所调用的回调函数



    1. function addData(name,email,phone){  
2. function(tx){  
3. ' insert into msgData values(?,?,?)',[name,email,phone],function(tx,rs){  
4. "保存成功！");  
5. function(tx,error){  
6.                     alert(error.message);  
7.                     });  
8.             });  
9.         }



    sqllite数据库操作的例子 



    1. //这个是下方的表格元素   
2. var datatable = null;   
3.     
4. //创建一个数据库对象   
5. //4个参数分别是 数据库名,版本号，数据库的描述，数据库大小   
6. var db = openDatabase('MyData','','My Database',102400);   
7.     
8. //init()方法，用于页面下方表格元素的引用，并且显示所有的数据库记录   
9. function init(){   
10. //取得下方的表格元素，并且赋值给全局变量   
11. "datatable");   
12.        
13. //显示所有已经在数据库中存储的记录   
14.     showAllData();   
15.  }   
16.     
17. //removeAllData()方法，用于移除所有的表格中的当前显示数据（它并不去除数据库记录）   
18. function removeAllData(){   
19. //首先，它将<table>下面的所有子元素全部清除   
20. //所以，这里它对于datatable组件进行遍历   
21. for(var i=datatable.childNodes.length-1;i>=0;i--){   
22.         datatable.removeChild(datatable.childNodes(i));   
23.     }   
24.        
25. //全部去除之后，现在需要显示这个表头部分<tr>里面有多个<th>   
26. //创建表头行到文档树中   
27. var tr= document.createElement('tr');   
28. //表头行的第一个表头   
29. var th1=document.createElement('th');   
30. //表头行的第二个表头   
31. var th2=document.createElement('th');   
32. //表头行的第三个表头   
33. var th3=document.createElement('th');   
34. //设置这3个表头的文本   
35. "姓名";   
36. "资料";   
37. "时间";   
38. //将这些表头依次放在表头行中   
39.     tr.appendChild(th1);   
40.     tr.appendChild(th2);   
41.     tr.appendChild(th3);   
42. //将这个新创建的表头行挂到表格中   
43.     datatable.appendChild(tr);   
44.  }   
45.     
46. //构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录   
47. function showData(row){   
48. //构建一个表行用于取得当前所要的信息   
49. var tr= document.createElement('tr');   
50. //创建第一列，这一列是姓名   
51. var td1=document.createElement('td');   
52. //填充第一列的信息为该行的name   
53.      td1.innerHTML=;   
54. //创建第二列，这一列是留言   
55. var td2=document.createElement('td');   
56. //填充第一列的信息为该行的message   
57.      td2.innerHTML=row.info;   
58. //创建第三列，这一列是日期   
59. var td3=document.createElement('td');   
60. //创建一个日期对象   
61. var t = new Date();   
62.      t.setTime(row.time);   
63. //将日期的标准形式和国际化日期形式分别设置给当前列   
64. " "+t.toLocaleTimeString();   
65. //吧这三列挂到当前行中   
66.      tr.appendChild(td1);   
67.      tr.appendChild(td2);   
68.      tr.appendChild(td3);   
69. //让这个表格在后面加上这一行   
70.      datatable.appendChild(tr);   
71.  }   
72.     
73. //这个函数用于显示所有的行到表格中，这些行是从数据库中拿出来的   
74. function showAllData(){   
75. //开启SQLite数据库事务,它用一个回调函数作为参数表明要执行的语句   
76. function(tx){   
77. //首先它创建一个数据库表，里面有3个字段   
78. 'CREATE TABLE IF NOT EXISTS InfoData(name TEXT,info TEXT,time INTEGER)',[]);   
79. //创建一个查询语句用来查询数据库表的所有记录（这个由于是所有查询，所以不需要预编译语句和参数 (第二个参数)）   
80. //然后定义了一个回调函数，表明对于结果集的处理   
81. 'SELECT * FROM InfoData',[],function(tx,rs){   
82.                
83. //对于结果集，首先，在获取它之前移除页面上的<table>的所有数据   
84.             removeAllData();   
85. //遍历结果集，对于每一行，依次调用showData来在table上创建对于的html文本   
86. for(var i=0;i<rs.rows.length;i++){   
87. //对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断）   
88.                 showData(rs.rows.item(i));   
89.             }   
90.         });   
91.     }   
92.     
93.     );   
94.  }   
95.     
96. //这个函数用于添加一条记录到数据库中，这些信息有些是从页面获得的，有些是系统生成的。   
97. function addData(name,info,time){   
98. //开启一个数据库事务   
99. //回调函数是一个有参数的插入语句，可以看到我们插入到表InfoData中，插入的内容也就是参数传递进来的内容   
100. function(tx){   
101.            
102. //插入的语句是个模板语句   
103. //插入成功的回调就是在控制台上输入一行日志   
104. 'INSERT INTO InfoData VALUES(?,?,?)' , [name,info,time],function(tx,rs){   
105. "成功保存数据!");   
106.         },   
107. //插入失败的回调就是在控制台上输入一行错误日志   
108. function(tx,error){   
109. "::"+error.message);   
110.         });   
111.     }   
112.        
113.     );   
114.  }   
115.     
116. //保存用户的当前输入，这个是作为点击页面上”保存“按钮的事件处理函数   
117. function saveData(){   
118. //从HTML页面中取得2个输入框的文本   
119. var name=document.getElementById('name').value;   
120. var info=document.getElementById('info').value;   
121. //得到当前的系统时间   
122. var time= new Date().getTime();   
123. //将用户名，用户信息，当前时间存到数据库中   
124.     addData(name,info,time);   
125. //更新下方<p id="msg">的表格显示   
126.     showAllData();   
127.  }



    html 代码： 


    1. <!DOCTYPE html>   
2. <head>   
3. <meta charset="UTF-8">   
4. <title>使用HTML5本地数据库DEMO</title>   
5. <script type="text/javascript" src="js/operateDB.js"></</script>   
6. </head>   
7.    
8. <body onload="init();">   
9. <h1>使用HTML5本地数据库DEMO</h1>   
10. <table>   
11. <tr><td>姓名：</td><td><input type="text" id="name"></td></tr>   
12. <tr><td>资料：</td><td><input type="text" id="info"></td></tr>   
13. <tr>   
14. <td></td>   
15. <td><input type="button" value="保存" onclick="saveData();"></td>   
16. </tr>   
17. </table>   
18. <hr>   
19. <table id="datatable" border="1"></table>   
20. <p id="msg"></p>   
21. </body>