HTML5之WebSQL

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);
 }

运行效果：