HTML5本地数据库
#HTML5  #Javascript  #SQLLite 


在HTML5中,内置了一种可以通过SQL语言来访问的数据库,在HTML4中,数据库只能放在服务器端,只能通过服务器来访问数据库,但是在HTML5中,可以就像访问本地文件那样轻松地对内置数据库进行直接访问。

现在,像这种不需要存储在服务器上的,被称为”SQLLite”的文件型SQL数据库已经得到了很广泛的利用,所以HTML5中也采用了这种数据库来作为本地数据库。那么要使用SQLLite数据库,有两个必要的步骤:

  • 创建访问数据库对象
    var db = openDatabase(‘mydb’,’1.0’,’test’,1024 * 1024);
    该方法有4个参数,分别为数据库名,版本号,数据库描述,数据库大小,如果有mydb这个数据,则访问,如果没有,就创建。
  • 使用事务处理
db.transaction(function(tx){
	tx.executeSql(sql);
});

调用transaction方法使用一个回调函数为参数,在这个函数中,执行访问数据库的语句。

eg.范例:HTML5本地数据库
HTML代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>本地数据库</title>
    </head>
    <body onload="init();">
        <h1>使用数据库实现存取数据</h1>
        <table>
        	<tr>
        		<td>用户名:</td>
        		<td><input type="text" id="username"></td>
        	</tr>
        	<tr>
        		<td>密码:</td>
        		<td><input type="text" id="pwd"></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>
</html>

Javascript代码:

//页面的表格元素
var datatable = null;
//创建一个数据库对象,包含4个参数
//分别为数据库名称,版本号,数据库描述,数据库大小
var db = openDatabase('UserInfo', '', 'Username and UserPwd', 1024 * 1024);
//初始化,显示所有数据库的数据
function init(){
	datatable = document.getElementById('datatable');
	showAllData();	
}
//删掉table中的所有数据,但是并不删除数据库里面的数据
function removeAllData(){
	//遍历table标签,然后删除所有子节点
	for(var i=datatable.childNodes.length-1;i>=0;i--){ 
        datatable.removeChild(datatable.childNodes(i)); 
    } 
	var tr = document.createElement('tr');
	var th1 = document.createElement('th');
	var th2 = document.createElement('th');
	th1.innerHTML = '用户名';
	th2.innerHTML = '密码';
	tr.appendChild(th1);
	tr.appendChild(th2);
	datatable.appendChild(tr);
}

function showData(row){
	var tr = document.createElement('tr');
	var td1 = document.createElement('td');
	td1.innerHTML = row.username;
	var td2 = document.createElement('td');
	td2.innerHTML = row.pwd;
	tr.appendChild(td1);	
	tr.appendChild(td2);
	datatable.appendChild(tr);
}
//此方法显示所有的数据到table中
function showAllData(){
	//对数据库执行的sql语句sql1和sql2
	//sql1:创建一个表名为UserMag的表,包含username和pwd两个字段,类型都是text
	var sql1 = 'CREATE TABLE IF NOT EXISTS UserMag(username TEXT, pwd TEXT)';
	var sql2 = 'SELECT * FROM UserMag';
	//SQLLite数据库的transaction方法,里面包含一个回调函数为参数,并执行
	db.transaction(function(tx){
		tx.executeSql(sql1,[]);	
		//查询表里面所有的数据,并定义了一个回调函数,返回结果集rs
		tx.executeSql(sql2, [], function(tx, rs){
			removeAllData();
			for(var i=0; i<rs.rows.length; i++){
				//针对每一行记录item(i),调用showData进行处理
				showData(rs.rows.item(i));
			}	
		});
	});	
}
//此方法是保存我们输入的用户名和密码
function addData(username, pwd){
	/*
	 * 在这里,使用了"INSERT INTO UserMag VALUES(?,?)"
	 * 这句sql语句来追加数据,同时使用了[username,pwd]
	 * 数组来传入sql语句中所需要的参数,真正对数据库
	 * 执行操作时,是把里面的两个问号换成后面的值。
	 */
	db.transaction(function(tx){
		tx.executeSql('INSERT INTO UserMag VALUES(?, ?)', [username, pwd], 
					  //当追加数据成功时执行的处理
					  function(tx, rs){
					  	alert('saved!!!');	
					  },
					  //当追加失败时执行的处理
					  function(tx, error){
					  	alert(error.source + "::" + error.message);	
					  });	
	});
}

function saveData(){
	var username = document.getElementById('username').value;
	var pwd = document.getElementById('pwd').value;
	addData(username, pwd);
	showAllData();
}

预览图:

html5

参考

Published under (CC) BY-NC-SA