HTML5 本地数据库（SQLite）示例-阿里云开发者社区

HTML5 本地数据库（SQLite）示例

2017-11-16 1736

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

按照国内一HTML5先行者的例子仿写了一个用HTML5 API来操作本地SQLite数据库的例子，感觉这个功能蛮好玩的，但是还不够强大，尤其浏览器支持力度不够：

HTML代码：

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用HTML5本地数据库DEMO</title>
<script type="text/javascript" src="js/operateDB.js"></</script>
</head>
<body onload="init();">
<h1>使用HTML5本地数据库DEMO</h1>
<table>
<tr><td>姓名：</td><td><input type="text" id="name"></td></tr>
<tr><td>资料：</td><td><input type="text" id="info"></td></tr>
<tr>
<td></td>
<td><input type="button" value="保存" onclick="saveData();"></td>
</tr>
</table>
<hr>
<table id="datatable" border="1"></table>
<p id="msg"></p>
</body>

javascript 封装了许多方法，比如保存数据到数据库，更新，同步下方的列表等。

/*
* This file is confidential by Charles.Wang Copyright belongs to Charles.wang
* You can make contact with Charles.Wang (charles_wang888@126.com)
*/
//这个是下方的表格元素
var datatable = null;
//创建一个数据库对象
//4个参数分别是数据库名,版本号，数据库的描述，数据库大小
var db = openDatabase('MyData','','My Database',102400);
//init()方法，用于页面下方表格元素的引用，并且显示所有的数据库记录
function init(){
//取得下方的表格元素，并且赋值给全局变量
datatable = document.getElementById("datatable");
//显示所有已经在数据库中存储的记录
showAllData();
}
//removeAllData()方法，用于移除所有的表格中的当前显示数据（它并不去除数据库记录）
function removeAllData(){
//首先，它将<table>下面的所有子元素全部清除
//所以，这里它对于datatable组件进行遍历
for(var i=datatable.childNodes.length-1;i>=0;i--){
datatable.removeChild(datatable.childNodes(i));
}
//全部去除之后，现在需要显示这个表头部分<tr>里面有多个<th>
//创建表头行到文档树中
var tr= document.createElement('tr');
//表头行的第一个表头
var th1=document.createElement('th');
//表头行的第二个表头
var th2=document.createElement('th');
//表头行的第三个表头
var th3=document.createElement('th');
//设置这3个表头的文本
th1.innerHTML="姓名";
th2.innerHTML="资料";
th3.innerHTML="时间";
//将这些表头依次放在表头行中
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
//将这个新创建的表头行挂到表格中
datatable.appendChild(tr);
}
//构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录
function showData(row){
//构建一个表行用于取得当前所要的信息
var tr= document.createElement('tr');
//创建第一列，这一列是姓名
var td1=document.createElement('td');
//填充第一列的信息为该行的name
td1.innerHTML=row.name;
//创建第二列，这一列是留言
var td2=document.createElement('td');
//填充第一列的信息为该行的message
td2.innerHTML=row.info;
//创建第三列，这一列是日期
var td3=document.createElement('td');
//创建一个日期对象
var t = new Date();
t.setTime(row.time);
//将日期的标准形式和国际化日期形式分别设置给当前列
td3.innerHTML=t.toLocaleString()+" "+t.toLocaleTimeString();
//吧这三列挂到当前行中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
//让这个表格在后面加上这一行
datatable.appendChild(tr);
}
//这个函数用于显示所有的行到表格中，这些行是从数据库中拿出来的
function showAllData(){
//开启SQLite数据库事务,它用一个回调函数作为参数表明要执行的语句
db.transaction(function(tx){
//首先它创建一个数据库表，里面有3个字段
tx.executeSql('CREATE TABLE IF NOT EXISTS InfoData(name TEXT,info TEXT,time INTEGER)',[]);
//创建一个查询语句用来查询数据库表的所有记录（这个由于是所有查询，所以不需要预编译语句和参数 (第二个参数)）
//然后定义了一个回调函数，表明对于结果集的处理
tx.executeSql('SELECT * FROM InfoData',[],function(tx,rs){
//对于结果集，首先，在获取它之前移除页面上的<table>的所有数据
removeAllData();
//遍历结果集，对于每一行，依次调用showData来在table上创建对于的html文本
for(var i=0;i<rs.rows.length;i++){
//对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断）
showData(rs.rows.item(i));
}
});
}
);
}
//这个函数用于添加一条记录到数据库中，这些信息有些是从页面获得的，有些是系统生成的。
function addData(name,info,time){
//开启一个数据库事务
//回调函数是一个有参数的插入语句，可以看到我们插入到表InfoData中，插入的内容也就是参数传递进来的内容
db.transaction(function(tx){
//插入的语句是个模板语句
//插入成功的回调就是在控制台上输入一行日志
tx.executeSql('INSERT INTO InfoData VALUES(?,?,?)' , [name,info,time],function(tx,rs){
console.log("成功保存数据!");
},
//插入失败的回调就是在控制台上输入一行错误日志
function(tx,error){
console.log(error.source+"::"+error.message);
});
}
);
}
//保存用户的当前输入，这个是作为点击页面上”保存“按钮的事件处理函数
function saveData(){
//从HTML页面中取得2个输入框的文本
var name=document.getElementById('name').value;
var info=document.getElementById('info').value;
//得到当前的系统时间
var time= new Date().getTime();
//将用户名，用户信息，当前时间存到数据库中
addData(name,info,time);
//更新下方<p id="msg">的表格显示
showAllData();
}