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;
irs.rows.length;
i++){
92. //对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断）
93. showData(rs.rows.item(i));
94. }
95. }
);
96. }
97.
98. );
99. }
100.
101. //这个函数用于添加一条记录到数据库中，这些信息有些是从页面获得的，有些是系统生成的。
102. function addData(name,info,time){
103. //开启一个数据库事务
104. //回调函数是一个有参数的插入语句，可以看到我们插入到表InfoData中，插入的内容也就是参数传递进来的内容
105. db.transaction(function(tx){
106.
107. //插入的语句是个模板语句
108. //插入成功的回调就是在控制台上输入一行日志
109. tx.executeSql('INSERT INTO InfoData VALUES(?,?,?)' , [name,info,time],function(tx,rs){
110. console.LOG("成功保存数据!");
111. }
,
112. //插入失败的回调就是在控制台上输入一行错误日志
113. function(tx,error){
114. console.log(error.source+"::"+error.message);
115. }
);
116. }
117.
118. );
119. }
120.
121. //保存用户的当前输入，这个是作为点击页面上”保存“按钮的事件处理函数
122. function saveData(){
123. //从HTML页面中取得2个输入框的文本
124. var name=document.getElementById('name').value;
125. var info=document.getElementById('info').value;
126. //得到当前的系统时间 www.2cto.com
127. var time= new Date().getTime();
128. //将用户名，用户信息，当前时间存到数据库中
129. addData(name,info,time);
130. //更新下方p id="msg">
的表格显示
131. showAllData();
132. }
我在GOOGLE Chrome上做了测试，以下是截图：
Chrome我使用的版本是最新版的，假定我安装到了C:/Documents and Settings/charles.wang/Local Settings/Application Data/Google/Chrome
那么SQLite数据库就安装到了$CHROME_HOME/User Data/Default/databases中
这个目录中databases.db是当前用户的所有创建的数据库的配置，而file__0目录则是数据库表文件目录：
我们使用SQLite管理工具打开这2个文件，就可以很清楚的看到：
在Databases.db中配置了所用到的数据库：
这和我们js中的设定一样：
- //创建一个数据库对象
- //4个参数分别是 数据库名,版本号，数据库的描述，数据库大小
- var db = openDatabase('MyData','','My Database',102400);
而当我们打开数据库文件，则可以看到：
这些数据库中的记录正是我们在页面上所展示的。
局限性：
可惜，我测试了下程序员最喜欢用的Firefox浏览器（版本号12），可惜它并不支持这种本地数据库SQLite，如图(我打开了Firebug的console)：
希望以后这个问题可以得到改善，毕竟用Firefox的人还是很多的，尤其程序员。
摘自 平行线的凝聚
按照国内一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;
irs.rows.length;
i++){
92. //对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断）
93. showData(rs.rows.item(i));
94. }
95. }
);
96. }
97.
98. );
99. }
100.
101. //这个函数用于添加一条记录到数据库中，这些信息有些是从页面获得的，有些是系统生成的。
102. function addData(name,info,time){
103. //开启一个数据库事务
104. //回调函数是一个有参数的插入语句，可以看到我们插入到表InfoData中，插入的内容也就是参数传递进来的内容
105. db.transaction(function(tx){
106.
107. //插入的语句是个模板语句
108. //插入成功的回调就是在控制台上输入一行日志
109. tx.executeSql('INSERT INTO InfoData VALUES(?,?,?)' , [name,info,time],function(tx,rs){
110. console.log("成功保存数据!");
111. }
,
112. //插入失败的回调就是在控制台上输入一行错误日志
113. function(tx,error){
114. console.log(error.source+"::"+error.message);
115. }
);
116. }
117.
118. );
119. }
120.
121. //保存用户的当前输入，这个是作为点击页面上”保存“按钮的事件处理函数
122. function saveData(){
123. //从HTML页面中取得2个输入框的文本
124. var name=document.getElementById('name').value;
125. var info=document.getElementById('info').value;
126. //得到当前的系统时间 www.2cto.com
127. var time= new Date().getTime();
128. //将用户名，用户信息，当前时间存到数据库中
129. addData(name,info,time);
130. //更新下方p id="msg">
的表格显示
131. showAllData();
132. }
我在Google Chrome上做了测试，以下是截图：
Chrome我使用的版本是最新版的，假定我安装到了C:/Documents and Settings/charles.wang/Local Settings/Application Data/Google/Chrome
那么SQLite数据库就安装到了$CHROME_HOME/User Data/Default/databases中
这个目录中databases.db是当前用户的所有创建的数据库的配置，而file__0目录则是数据库表文件目录：
我们使用SQLite管理工具打开这2个文件，就可以很清楚的看到：
在Databases.db中配置了所用到的数据库：
这和我们js中的设定一样：
- //创建一个数据库对象
- //4个参数分别是 数据库名,版本号，数据库的描述，数据库大小
- var db = openDatabase('MyData','','My Database',102400);
而当我们打开数据库文件，则可以看到：
这些数据库中的记录正是我们在页面上所展示的。
局限性：
可惜，我测试了下程序员最喜欢用的Firefox浏览器（版本号12），可惜它并不支持这种本地数据库SQLite，如图(我打开了Firebug的console)：
希望以后这个问题可以得到改善，毕竟用Firefox的人还是很多的，尤其程序员。
摘自 平行线的凝聚
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5本地数据库（SQLite）示例
本文地址： https://pptw.com/jishu/586629.html