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

运行效果：