什么是web sql?我们经常在应用程序中大量处理结构化数据，html5引入了web sql database概念，它允许应用程序通过异步的javascript接口来访问sqllite数据库。但目前web sql并不在html5的规范中，而是一个单独的规范，safari、chrome、oprea浏览器支持web sql。
三个核心方法web sql database 规范中定义的三个核心方法：
opendatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
transaction：这个方法允许我们根据情况控制事务提交或回滚
executesql：这个方法用于执行sql 查询
opendatabase语法：var db = opendatabase(name,version,displayname,estimatedsize,creationcallback);
name:数据库名字
version:数据库版本号
displayname:数据库描述
estimatedsize:数据库保存数据大小，以字节为单位
creationcallback:回调函数，非必须
transactiontransaction方法用以处理事务，当一条语句执行失败的时候，整个事务回滚。方法有三个参数：包含事务内容的一个方法、执行成功回调函数(可选)、执行失败回调函数(可选)。
db.transaction(function (context) {
context.executesql('create table if not exists testtable (id unique, name)');
context.executesql('insert into testtable (id, name) values (0, "byron")');
context.executesql('insert into testtable (id, name) values (1, "casper")');
context.executesql('insert into testtable (id, name) values (2, "frank")');
});
这个例子中我们创建一个表testtable，并在表中插入三条数据，四条执行语句任何一条出错，整个事务都会回滚。
executesqlexecutesql方法用以执行sql语句，返回结果，方法有四个参数：
- 查询字符串
- 用以替换查询字符串中问号的参数
- 执行成功回调函数（可选）
- 执行失败回调函数（可选）
语法：
trans.executesql(sql,[],function(){trans,data},function(trans,msg){});
示例<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web sql demo</title>
<script src="jquery-3.0.0.min.js"></script>
<script>
//创建或连接数据库
function getdb()
{
var db = opendatabase("data.db","1.0","demo",1024*1024);
return db;
}
//初始化数据库
function initdb()
{
var db = getdb();
if(db == null)
{
alert("你的浏览器不支持web sql");
return null;
}
db.transaction(function(trans){
trans.executesql("create table if not exists demo(name text null,title text null,content text null)",[],function(trans,result){},
function(trans,error){alert(error)})
});
}
$(function(){
var db = getdb();
initdb();
$("#btnsave").click(function(){
var name = $("#name").val();
var title = $("#title").val();
var content = $("#content").val();
//执行sql脚本来插入数据
db.transaction(function(trans){
trans.executesql("insert into demo(name,title,content)values(?,?,?)",
[name,title,content],
function(trans,success){},
function(trans,error){alert(error);}
);
showall();
});
});
})
//显示所有数据
function showall()
{
$("#tbldata").empty();
var db = getdb();
db.transaction(function(trans){
trans.executesql("select * from demo",[],function(trans,data){
//获取查询到的数据
if(data)
{
for(var i=0;i<data.rows.length;i++)
{
//获取一行json数据，将数据拼接成表格
appenddatatotable(data.rows.item(i));
}
}
},function(trans,error){alert(error);});
});
}
function appenddatatotable(data)
{
var name = data.name;
var title = data.title;
var content = data.content;
var strhtml = "";
strhtml += "<tr>";
strhtml += "<td>"+name+"</td>";
strhtml += "<td>"+title+"</td>";
strhtml += "<td>"+content+"</td>";
strhtml += "</tr>";
$("#tbldata").append(strhtml);
}
</script>
</head>
<body>
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="name" id="name" required/></td>
</tr>
<tr>
<td>标题</td>
<td><input type="text" name="title" id="title" required/></td>
</tr>
<tr>
<td>留言</td>
<td><input type="text" name="content" id="content" required/></td>
</tr>
</table>
<input type="button" value="保存" id="btnsave"/>
<br/>
<input type="button" value="展示所有数据" onclick="showall();"/>
<table id="tbldata"></table>
</body>
</html>
运行结果如下：
以上就是html5 web存储-web sql示例代码分析的详细内容。