HTML5之本地存储

完整实例代码

最近实验室要做一款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() {// 获取用户IDvar 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() {// 获取用户IDvar 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() {// 获取用户输入的IDvar 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;}

完整实例代码