PhoneGap 存储数据
创建表并在PhoneGap中存储数据
在上一节中，我们了解了如何使用 localStorage 对象从移动设备存储和检索数据。在本节中，我们将了解最复杂的功能，即 SQLite 数据库。如果我们以前使用过数据库，那么使用它会很容易。
在 PhoneGap 中，有一个完整的 SQL 兼容数据库，它存在于我们的应用程序中并将数据存储在装置。这对于不适用于本地存储的更复杂的信息将非常有用。它是一种文件格式。这些是用于创建和存储数据的以下步骤:
1) 创建一个新项目:
首先，我们将创建一个带有空白的新 PhoneGap 项目模板。如果您不知道如何使用空白模板创建应用程序，请查看 PhoneGap 项目链接。
2) 创建表单
现在，我们将创建一个表单或用户界面来获取用户的数据。在此表单中，我们将为姓名和电子邮件添加两个文本字段，并为每个字段添加一个标签。我们还将添加两个用于检索和存储数据的按钮。表单将如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>SQLLite DB App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1> Database Storage Example </h1></div>
<div data-role="main" class="ui-content">
<label for="name"> Name </label>
<input type="text" id="name" />
<label for="email"> Email </label>
<input type="text" id="email" />
<button id="btnSave" type="submit"> Save </button>
<button id="showList"> Show Employees </button>
<script type="text/javascript" src="cordova.js"></script>
</div><!--main-->
</div><!--page-->
</body>
</html>
3) 创建 window.onload 函数
我们将在 JQuery 移动库的下面创建 window.onload 函数。加载窗口屏幕时将自动调用此函数。在这个函数中，我们将使用 id 获取保存按钮并添加一个事件来调用 saveData 函数。 window.onload 函数将编码在 <script></script> 之间 标记 如下:
<script>
window.onload=function()
{
document.getElementById('btnSave').addEventListener('click', saveData);
}
</script>
我们的数据库也将在加载窗口屏幕的同时打开。因此，我们还将使用 window.openDatabase 在同一个 window.onload 函数中编写用于打开数据库的代码。该函数包含四个参数，即数据库名称、版本、描述和以字节为单位的数据库大小。我们将通过以下方式使用此功能:
<script>
var db;
window.onload=function()
{
document.getElementById('btnSave').addEventListener('click', saveData);
db = window.openDatabase("employees", "1.0", "lidihuo", 200000);
}
</script>
4) 创建 saveData 函数
现在，我们将创建具有一个参数的 saveData 函数。这个参数的名字可以是任何东西。我们将创建 transaction 函数，该函数将由数据库对象 db 运行。这个事务函数会回调另外三个函数，即saveRecord、onSuccess和onError。
function saveData(e)
{
db.transaction(saveRecord, onSuccess, onError);
}
5) 创建 saveRecord 函数
现在，我们将创建第一个回调函数，即 saveRecord。该函数将交易作为参数或参数。在这个函数中，我们将从用户界面获取数据，然后我们将使用executeSql 函数以如下方式创建一个表来存储我们的数据:
function saveRecord(transaction)
{
var name= document.getElementById('name').value;
var email = document.getElementById('email').value;
transaction.executeSql('CREATE TABLE if NOT EXISTS employeesList (id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT NOT null, Email TEXT NOT null) ');
}
接下来，我们将创建另一个 SQL 语句。我们将使用insert SQL 语句将数据插入到表中。这条语句会通过executeSql函数在数据库中执行，代码如下:
var sql= "INSERT INTO employeesList (Name, Email) VALUES ('" + name +"', '" + email + "')";
console.log(sql); <!--Used for debugging-->
transaction.executeSql(sql);
6) 创建 onSuccess 和 onError 函数
onSucess 函数将在我们的数据存储在数据库中时被调用， >onError 函数将在出现错误或错误时调用。这两个函数的编码方式如下:
function onSuccess()
{
console.log("Record Saved");
}
function onError(error)
{
console.log("SQL error: " + error.code);
}
我们可以使用浏览器查看我们存储的数据。我们必须去开发者工具，在存储部分，我们可以看到我们的数据库、表和我们的数据。
在下一节中，我们将学习如何从SQLite 数据库。
