webStorage作为HTML5中重要的新概念之一,web Storage Database既轻量级数据库,它的出现大大提高的Web应用程序的性能,在HTML5出现之前对数据的保存都是由服务器端实现,现在HTML5提供这种客户端轻量级数据库存储,可以直接将用户的数据保存在客户端,这就减轻了服务器的负担。
下面就来通过介绍一个WebSQL简单实例。让大家快速了解WebSQL的使用方法。
三大核心方法
openDatabase();
transaction();
executesql();
openDatabase()
打开一个数据库,如果这个数据库不存在则新建一个数据库,此方法一共有四个参数,分别为:数据库名称、、数据库版本号、数据库描述、数据库大小、函数回调,函数回调会在成功创建数据库后被调用。
transaction()
主要用来处理事务,当我们想要操作数据库时都要通过这个函数操作,比如建立一张数据表、向表中插入数据、查询数据。
executesql()
执行SQL语句
我们已经知道了WebSQL的主要核心方法,下面是我写的一个小例子以及一些必要的注释,希望能帮助大家更好的理解。
function initData(){
/*初始化数据库*/
var db = getCurrent();
/*如果不存在这个数据库*/
if(!db){
alert("您的浏览器不支持WebSQL!");
return;
}
/*创建一个新的数据表*/
db.transaction(function(trans){
trans.executeSql("create table if not exists demo(uName text null,title text null,words text null)",[],function(trans,result){},function(trans,message){})
})
}
/*新建或打开数据库*/
function getCurrent(){
var db = openDatabase("data1.bd","1.0","demo data",1024*1024);
return db;
}
$(function(){
initData();//初始化数据库
$("#btnSave").click(function(){
/*获取输入内容*/
var name=$("#name").val();
var title=$("#title").val();
var word=$("#book").val();
var db=getCurrent();
/*插入数据*/
db.transaction(function(trans) {
trans.executeSql("insert into demo(uName,title,words)values(?,?,?)",[name,title,word], function(ts,result){},
function(ts,message){
alert(message);
})
});
showAll();
});
});
function showAll(){
/*清空表格*/
$("#showAll").empty();//清除所有子元素
var db=getCurrent();
db.transaction(function(trans){
trans.executeSql("select * from demo",[],function(ts,data){
/*如果数据库中有数据,则循环显示*/
if(data){
for(var i=0;i<data.rows.length;i++){
/*将数据添加到表格中*/
appendToTable(data.rows.item(i));
}
}
},
function(ts,message){
alert(message);
})
})
}
/*将查询到的数据库添加到表格中*/
function appendToTable(data){
var name=data.uName;
var title=data.title;
var word=data.words;
var addHtml="";
addHtml+="<tr>";
addHtml+="<td>"+name+"</td>";
addHtml+="<td>"+title+"</td>";
addHtml+="<td>"+word+"</td>";
addHtml+="</tr>";
$("#showAll").append(addHtml);
}
运行效果: