当前位置:数据库 > SQLite >>

HTML5本地数据库(SQLite)示例

按照国内一HTML5先行者的例子仿写了一个用HTML5 API来操作本地SQLite数据库的例子,感觉这个功能蛮好玩的,但是还不够强大,尤其浏览器支持力度不够:
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>
javascript 封装了许多方法,比如保存数据到数据库,更新,同步下方的列表等。
1. /*
2.  * This file is confidential by Charles.Wang Copyright belongs to Charles.wang
3.  * You can make contact with Charles.Wang (charles_wang888@126.com)
4.  */
5.  
6.  //这个是下方的表格元素
7.  var datatable = null;
8.  
9.  //创建一个数据库对象
10.  //4个参数分别是 数据库名,版本号,数据库的描述,数据库大小
11.  var db = openDatabase('MyData','','My Database',102400);
12.  
13.  //init()方法,用于页面下方表格元素的引用,并且显示所有的数据库记录
14.  function init(){
15.     //取得下方的表格元素,并且赋值给全局变量
16.     datatable = document.getElementById("datatable");
17.     
18.     //显示所有已经在数据库中存储的记录
19.     showAllData();
20.  }
21.  
22.  //removeAllData()方法,用于移除所有的表格中的当前显示数据(它并不去除数据库记录)
23.  function removeAllData(){
24.     //首先,它将<table>下面的所有子元素全部清除
25.     //所以,这里它对于datatable组件进行遍历
26.     for(var i=datatable.childNodes.length-1;i>=0;i--){
27.         datatable.removeChild(datatable.childNodes(i));
28.     }
29.     
30.     //全部去除之后,现在需要显示这个表头部分<tr>里面有多个<th>
31.     //创建表头行到文档树中
32.     var tr= document.createElement('tr');
33.     //表头行的第一个表头
34.     var th1=document.createElement('th');
35.     //表头行的第二个表头
36.     var th2=document.createElement('th');
37.     //表头行的第三个表头
38.     var th3=document.createElement('th');
39.     //设置这3个表头的文本
40.     th1.innerHTML="姓名";
41.     th2.innerHTML="资料";
42.     th3.innerHTML="时间";
43.     //将这些表头依次放在表头行中
44.     tr.appendChild(th1);
45.     tr.appendChild(th2);
46.     tr.appendChild(th3);
47.     //将这个新创建的表头行挂到表格中
48.     datatable.appendChild(tr);
49.  }
50.  
51.  //构建指定数据库行的数据对应的HTML文本。传入参数:数据库结果集中的某一行记录
52.  function showData(row){
53.      //构建一个表行用于取得当前所要的信息
54.      var tr= document.createElement('tr');
55.      //创建第一列,这一列是姓名
56.      var td1=document.createElement('td');
57.      //填充第一列的信息为该行的name
58.      td1.innerHTML=row.name;
59.      //创建第二列,这一列是留言
60.      var td2=document.createElement('td');
61.      //填充第一列的信息为该行的message
62.      td2.innerHTML=row.info;
63.     //创建第三列,这一列是日期
64.      var td3=document.createElement('td');
65.      //创建一个日期对象
66.      var t = new Date();
67.      t.setTime(row.time);
68.      //将日期的标准形式和国际化日期形式分别设置给当前列
69.      td3.innerHTML=t.toLocaleString()+" "+t.toLocaleTimeString();
70.      //吧这三列挂到当前行中
71.      tr.appendChild(td1);
72.      tr.appendChild(td2);
73.      tr.appendChild(td3);
74.      //让这个表格在后面加上这一行
75.      datatable.appendChild(tr);
76.  }
77.  
78.  //这个函数用于显示所有的行到表格中,这些行是从数据库中拿出来的
79.  function showAllData(){
80.     //开启SQLite数据库事务,它用一个回调函数作为参数表明要执行的语句
81.     db.transaction(function(tx){
82.         //首先它创建一个数据库表,里面有3个字段
83.         tx.executeSql('CREATE TABLE IF NOT EXISTS InfoData(name TEXT,info TEXT,time INTEGER)',[]);
84.         //创建一个查询语句用来查询数据库表的所有记录(这个由于是所有查询,所以不需要预编译语句和参数 (第二个参数))
85.         //然后定义了一个回调函数,表明对于结果集的处理
86.         tx.executeSql('SELECT * FROM InfoData',[],function(tx,rs){
87.             
88.             //对于结果集,首先,在获取它之前移除页面上的<table>的所有数据
89.             removeAllData();
90.             //遍历结果集,对于每一行,依次调用showData来在table上创建对于的html文本
91.             for(var i=0;i<rs.rows.length;i++){
92.                 //对于ite

补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,