加载中…HTML5本地数据库（SQLite）示例
(2012-10-18 11:56:09) | 分类： 网页学习 |
-
按照国内一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.
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.getElementByIdx_x("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_x('tr');
33.//表头行的第一个表头
34.var th1=document_createElement_x('th');
35.//表头行的第二个表头
36.var th2=document_createElement_x('th');
37.//表头行的第三个表头
38.var th3=document_createElement_x('th');
39.//设置这3个表头的文本
40.th1.innerHTML="姓名";
41.th2.innerHTML="资料";
42.th3.innerHTML="时间";
43.//将这些表头依次放在表头行中
44.tr.a(th1);
45.tr.a(th2);
46.tr.a(th3);
47.//将这个新创建的表头行挂到表格中
48.datatable.a(tr);
49.}
50.
51.//构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录
52.function showData(row){
53.//构建一个表行用于取得当前所要的信息
54.var tr= document_createElement_x('tr');
55.//创建第一列，这一列是姓名
56.var td1=document_createElement_x('td');
57.//填充第一列的信息为该行的name
58.td1.innerHTML=row.name;
59.//创建第二列，这一列是留言
60.var td2=document_createElement_x('td');
61.//填充第一列的信息为该行的message