最近实验室要做一款WebPOS系统,但要求本地离线也能用,因此就必须进行离线存储。幸运的是,HTML5提供了大量的本地数据存储功能,其中令人兴奋的是支持了WEBSQL.允许我们像写后台程序一样操作本地数据库。下面就介绍一下如何通过WebSql操作本地数据库,并配备一个人员管理的例子.
WebSql操作的数据库叫做SQLite,这款数据因其便捷轻巧,已在多个地方使用,如移动开发。使用WebSql操作数据库前,首要判断的是,浏览器是否支持本地数据库操作.判断的方法如下:
/** 判断浏览器是否支持WebSql数据库* */
function getOpenDatabase() {
try {
// 如果支持则返回数据库连接句柄
if (!!window.openDatabase) {
return window.openDatabase;
} else {
return undefined;
}
} catch (e) {
return undefined;
}
}
调用window对象的openDatabase()方法来获取本地数据库的一个连接句柄,如果该句柄为null、undefined则说明不支持本地数据库操作,反之,便提供本地数据库操作.接着我们连接本地数据库,并创建一张用来存储人员信息的人员记录表
/* 页面加载完成时调用的函数 */
function init() {
initView();
// 获取数据库连接句柄
var odb = getOpenDatabase();
// 如果获取的连接句柄为空或者不可用
if (odb) {
// 连接数据库,并获取数据库对象
db = odb("testDatabase", "1.0", "This is a test database!",
10 * 1024 * 1024);
db.transaction(function(t) {
// db.transaction(fun)方法用来操作数据库,fun为操作数据库的回调方法
// 定义代执行的sql语句
var createTableSql = "create table if not exists people ("
+ "id Integer primary key autoincrement,"
+ "name text not null," + "age Integer" + ")";
// t.executeSql(sql,params,resultFun,errorFun)方法用来操作数据库,
// 该方法含有四个参数,分别是:
// 1.sql: 待执行的sql语句,sql语句中的条件值用?来表示,如name=?
// 2.params: 用来指明sql语句中的条件值,该参数为一个数组,可以把条件值按顺序放入,如["simple"]
// 3.resultFun: 数据库操作执行成功后的回调方法
// 4.errorFun: 数据库执行失败后的回调方法
t.executeSql(createTableSql, [], function(t, r) {
log("创建成功!");
}, function(t, e) {
log("Create Table :" + e.message);
});
});
} else {
log("您的浏览器不支持本地数据库!");
}
}
init方法是在页面onLoad时调用的方法,可在body标签中声明.上段代码中,首先使用连接句柄,连接本地数据库,代码如下:
// 连接数据库,并获取数据库对象
db = odb("testDatabase", "1.0", "This is a test database!",
10 * 1024 * 1024);
连接时需指明4个参数:第一个参数表示数据库名称、第二个参数表示数据库版本号、第三个参数表示数据库描述、第四步指明数据库的大小。连接建立后,我们便可以调用数据库对象db的transaction(fun(t))方法来进行数据库操作了,该方法的唯一一个参数是一个方法,在js中方法也是一种类型,可以作为参数进行传递.这就是传说中的回调方法.执行该操作时,会调用传入的fun(t)进行数据库操作. 回调方法中的参数为数据操作的句柄,可以通过它来执行SQL语句操作,调用相应方法是excuteSql(sql,params,resultFun,errorFun),该方法还有四个参数,第一个参数是待执行的sql语句,第二个参数为sql语句中的变量值,第三个参数为执行成功后的回调方法,第四个参数为执行失败的回调方法.了解了这些之后,我们可以执行sql语句了,这里是创建一个people表,含有三个字段id,name和age.对数据库的增删改查即获取列表的方法如下:
新增人员:
/* 向数据库中新增一条人员信息记录 */
function savePeople() {
// 从页面中获取用户输入的人员姓名
var peopleName = input_name.value;
// 从页面中获取用户输入的人员年龄
var age = input_age.value;
// 执行数据库操作,新增一条人员记录
db.transaction(function(t) {
// 声明代执行的sql语句
var createTableSql = "insert into people values( null,'" + peopleName
+ "'," + age + ")";
// 执行sql语句
t.executeSql(createTableSql, [], function(t, r) {
log("插入数据成功!" + peopleName);
findAllPeople();
}, function(t, e) {
log("Insert Table :" + e.message);
});
});
}
删除人员:
function deletePeople() {
// 获取用户ID
var id = input_id.value;
// 执行数据库操作,新增一条人员记录
db.transaction(function(t) {
// 声明代执行的sql语句
var createTableSql = "delete from people where id = ?";
// 执行sql语句
t.executeSql(createTableSql, [ id ], function(t, r) {
log("删除数据成功! ID:" + id);
findAllPeople();
}, function(t, e) {
log("Delete People :" + e.message);
});
});
}
更新人员信息:
function updatePeople() {
// 获取用户ID
var id = input_id.value;
// 从页面中获取用户输入的人员姓名
var peopleName = input_name.value;
// 从页面中获取用户输入的人员年龄
var age = input_age.value;
// 执行数据库操作,新增一条人员记录
db
.transaction(function(t) {
// 声明代执行的sql语句
var createTableSql = "update people set name = ?, age = ? where id = ?";
// 执行sql语句
t.executeSql(createTableSql, [ peopleName, age, id ], function(
t, r) {
log("更新数据成功!" + peopleName);
findPeople();
}, function(t, e) {
log("Update People :" + e.message);
});
});
}
查找指定人员信息:
/* 根据用户输入的ID查找指定人员信息 */
function findPeople() {
// 获取用户输入的ID
var id = input_id.value;
log("查询人员记录, ID: " + id);
// 执行数据库操作,查询人员记录
db.transaction(function(t) {
var querySql = "select * from people where id = ?";
t.executeSql(querySql, [ id ], function(t, r) {
showTableData(r.rows, div_peopleList);
if (r.rows.length > 0) {
var row = r.rows.item(0);
input_id.value = row.id;
input_name.value = row.name;
input_age.value = row.age;
}
}, function(t, e) {
log("Can't get the data");
});
});
}
查找人员列表信息:
/* 获取人员列表 */
function findAllPeople() {
db.readTransaction(function(t) {
var querySql = "select * from people";
t.executeSql(querySql, [], function(t, r) {
showTableData(r.rows, div_peopleList);
}, function(t, e) {
log("Can't get the data");
});
});
}
记录操作日志:
function log(text) {
label_log.innerHTML = text;
}
生成数据表格:
var tableBegin = "<table>";
var tableHeader = "<tr class='header'>" +
"<td>ID</td>" +
"<td>Name</td>" +
"<td>Age</td>" +
"</tr>";
var tableEnd = "</table>";
var trBegin = "<tr class='content'>";
var trEnd = "</tr>";
var tdBegin = "<td>";
var tdEnd = "</td>";
//为视图组件内添加一个表格,用于显示rows中的数据
function showTableData(rows, view){
var tableHtml = tableBegin;
tableHtml += tableHeader;
var len = rows.length;
for ( var i = 0; i < len; i++) {
var row = rows.item(i);
tableHtml += trBegin;
tableHtml += tdBegin;
tableHtml += row.id;
tableHtml += tdEnd;
tableHtml += tdBegin;
tableHtml += row.name;
tableHtml += tdEnd;
tableHtml += tdBegin;
tableHtml += row.age;
tableHtml += tdEnd;
tableHtml += trEnd;
}
tableHtml += tableEnd;
view.innerHTML = tableHtml;
}
完整实例代码