概述

本文演示了在Web应用程序中数据库操作的使用。 所有的数据和代码都从开源库html5sql.js中取出。

HTML5SQL应用程序

html5sql是一个轻量级JavaScript模块，使得在HTML5 Web Database下的工作更轻松。 它的主要作用是为在一个交易中SQL声明的SEQUENTIAL处理提供一个结构。

先决条件

下面的开源javascript库必须被包含到html页面中。

<script type="text/javascript" src="./js/html5sql.js"></script>

HTML页面

web页面内容包含一个div元素，用来在内容页面上显示结果。 页面注脚包含相关按钮，用于显示数据库功能，如创建，删除和显示。 html代码如下。

<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>HTML5SQL Demo</h1>
  </div>
  <div data-role="content">
    <div id="successfullStatements"></div>
  </div>
  <div data-role="footer" data-position="fixed">
    <div data-role="tabbar">
      <ul>
        <li><a id="createTable">Create</a></li>
        <li><a id="showTable">Show</a></li>
        <li><a id="deleteTable">Delete</a></li>
      </ul>
    </div>
  </div>
</div>

Javascript

要创建数据库，下面的sql查询被发送到html5sql库，用来创建数据库。

function createTable()
{
  var successfullStatements = $("#successfullStatements"),
  errors = $("#errors");
  html5sql.process(
	["DROP TABLE IF EXISTS StarWarsCharacters;",
	 "CREATE TABLE IF NOT EXISTS StarWarsCharacters (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT);",
	"INSERT INTO StarWarsCharacters (name) VALUES ('Antony');",
        "INSERT INTO StarWarsCharacters (name) VALUES ('BroadMan');",
	"INSERT INTO StarWarsCharacters (name) VALUES ('Donald');",
	"INSERT INTO StarWarsCharacters (name) VALUES ('Esibella Leia');",
	 ],
	function(){
	   alert("Created Table");
        }, function(error, statement){
            alert("Failed to create Table" + error.msg);
        }
}

下面的代码用于从数据库中得到数据。

function showTable(){

    var successfullStatements = $("#successfullStatements"),
        errors = $("#errors")

    html5sql.process(
         ["SELECT * FROM StarWarsCharacters;"],
         function(transaction, results, rowsArray){
             for(var i = 0; i < rowsArray.length; i++){
                 successfullStatements.append("<li>Retrieved" +rowsArray[i].name+"</li>");
             }
             successfullStatements.append("<li>Done selecting data</li>");
         },
         function(error, statement){
             errors.append("<li>"+error.message+" Occured while processing: "+statement+"</li>");
         }
    );

}

要从数据库中删除表格，“drop" sql查询的用法在下面的代码中显示。

function deleteTable(){
	 html5sql.process( ["drop table if exists StarWarsCharacters"], function(){
		alert("Deleted the table");
	 } , function(error, statement){
		 console.log("error message"+ error.message);
	 });

}

屏幕截图

下面显示的是HTML5SQL应用程序的截图