适用浅谈HTML5 Web SqlDatabase
日期：2014-05-16 浏览次数：20480 次
实用浅谈HTML5 Web SqlDatabase
看到这个题目相信大家就知道我所要说的是什么了，这里我不带大家去分析数据库的更多深入研究，本篇文章主要是以实用为目的，看过以往的很多文章大多数都是要不只讲理论要不就是拿个例子放在就当万事大吉了，这样的缺点就是让初学者可能很疑惑，这边文章我有一个新的想法把实例代码和功用同时拿来对比，带大家快速进入应用中。在文章中主要写出一些数据库的操作步骤及用法，至于关于sql语言的一些语法请大家另行参考其它资料，下面言归正传：请看下面代码：
?
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Web SQL Database</title>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script>
$(window).load(function(){
//打开或创建数据库
/*
window.openDatabase(name,version,displayName,size,creationCallback)
参数：
1、数据库名称
2、版本号
3、展示的名字
4、当数据库不存在创建时调用 此函数是一个异常函数并不是异步执行时回调函数
*/
var db = window.openDatabase("mydb","1.0","testDB",2*1024*1024,function(db){
//错误回调函数如果版本号为空时 如：
/**
* var db = window.openDataBase("mydb","","testDB",2*1024*1024,function(){
db.changeVersion(db.version,"1.0");
});
//更改数据库版本
changeVersion("oldVersion","newVersion"[,callback[,errorCallback[,successCallback]]])
参数：
1、定义数据库的当前版本
2、定义数据库新的版本
3、可选事务函数（如果有一处错误此函数就会完全回滚全不执行）有一个参数SQLTransaction
4、定义版本号错误回调函数 有一个参数SQLError
5、定义版本号成功回调函数
*/
alert("数据库常见成功");
});
$("#createTable").click(function(){
//执行sql事务
/*
1、transaction(callback(tx)[,errorCallback(sqlError)[,successCallback()]])//允许执行读写操作
2、readTransaction(callback(tx)[,errorCallback(sqlError)[,successCallback()]])//只允许读操作
参数：
1、定义一个事务操作要执行的回调函数
2、事务执行错误回调函数
3、事务执行成功回调函数
*/
db.transaction(function(tx){
/*定义一个事务操作要执行的回调函数（如果有一处错误此函数就会完全回滚全不执行）*/
//执行sql
/*
executeSql(sqlStatement[,arguments[,callback[,errorCallback]]])
参数：
1、定义要执行的sql语句
2、如果sql语句中使用了？占位符就可以在这个数组中写上相应的动态数据，数据的顺序和占位符的顺序是一致的否则可以省略或定义为空数组[]
3、执行sql成功时的回调函数 如果不想定义回调函数也可以指定参数为null 该函数有两个参数第一个是SQLTransaction对象第二个是SQLResultSet对象
4、可选参数 定义一个SQL执行失败时的回调函数 该函数有两个参数SQLTransaction和SQLError
可以使用callback回调函数处理返回的结果
function queryResult(){
try{
var rowList=result.rows;
for(var i=0;I<rowList.length;i++){
var row = rowList.item(i);
for(var j in row){
document.write(j+"="+row[j]+"<br/>");
}
}
}catch(err){
alert(err.message?err.message:err.toString());
}
}
*/
var sql = "create table employees(name text,age integer)";
tx.executeSql(sql);
},function(SQLError){
//事务失败回调函数
alert(err.message?err.message:err.toString());
},function(){
//事务成功回调函数无参数
});
});
$("#insertData").click(function(){
db.transaction(function(tx){
var sql="insert into employees values(?,?)";
tx.executeSql(sql,[$("#name").val(),$("#age").val()],function(){
$("#name").val("");
$("#age").val("")
});
},function(SQLError){
alert(err.message?err.message:err.toString());
});
});
});
</script>
</head>
<body>
<button id="createTable">创建数据库表</button>
用户名：<input type="text" id="name"/>
年龄：<input type="text" id="age"/>
<button id="insertData">添加数据</button>
</body>
</html>
?以上是异步数据库的写法由于web sql database现在已经不作为html5的规范，但是api已经被safari、chrome、opera等浏览器所支持，所以在移动设备上应用还是很有用处的，好了只要按照上面的代码来写相信你的web数据库已经轻松搞定！
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
