HTML5 学习笔记（三）——本地存储 - SeeYouBug(5)_H5之家

var ticker={ n:0, add:function() { this.n++; }, show:function() { alert(this.n); } } ticker.add(); ticker.add(); ticker.show();

运行结果：2

第一次封装后的代码，在整个window对象中只暴露dbApp对象，代码如下：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Web SQL Database</title> <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <h2>Web SQL Database</h2> <div> <button>创建表</button> <button>删除表</button> <table> <tr> <th>编号</th> <th>名称</th> <th>价格</th> <th>删除</th> </tr> </table> <fieldset> <legend>商品信息</legend> <p> <label for="name">名称：</label> <input type="text" value="" /> </p> <p> <label for="price">价格：</label> <input type="text" value="" /> </p> <p> <input type="hidden" /> <button>添加</button> <button>更新</button> </p> </fieldset> </div> <h2></h2> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> dbApp={ //打开数据库 openDb:function() { .db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() { this.log("创建或打开数据库完成"); }); }, //初始化 init:function() { .openDb(); .bindEvent(); .select(); this.log("初始化完成"); }, //绑定事件 bindEvent:function() { //添加事件 $("#btnInsert").click(this.insert); $("#btnUpdate").click(this.update); $("#btnCreateTable").click(this.createTable); $("#btnDropTable").click(this.dropTable); }, //显示消息 log:function(info) { $("#msg")[0].innerHTML += info + "<br/>"; }, //创建表 createTable:function() { this.db.transaction(function(tx) { tx.executeSql( "create table IF not EXISTS goods(id integer primary key autoincrement,name text not null,price double)", [], function(tx, result) { this.log('创建表成功'); }, function(tx, error) { this.log('创建表失败' + error.message); }); }); }, //删除表 dropTable:function() { this.db.transaction(function(tx) { tx.executeSql( "drop table IF EXISTS goods", [], function(tx, result) { this.log('删除表成功'); }, function(tx, error) { this.log('删除表失败' + error.message); }); }); }, //展示，加载数据 select:function() { //将表格中tr索引大于0的元素删除 $("#tabGoods tr:gt(0)").remove(); this.db.transaction(function(tx) { tx.executeSql( "select id,name,price from goods", [], function(tx, result) { for(var i = 0; i < result.rows.length; i++) { var tr = $("<tr/>"); $("<td/>").text(result.rows.item(i)["id"]).appendTo(tr); $("<td/>").text(result.rows.item(i)["name"]).appendTo(tr); $("<td/>").text(result.rows.item(i)["price"]).appendTo(tr); var del = $("<a href='#' >删除 | </a>") var edit = $("<a href='#' >修改</a>") $("<td/>").append(del).append(edit).appendTo(tr); tr.appendTo("#tabGoods"); } }, function(tx, error) { this.log('创建表失败' + error.message); }); }); }, //插入数据 insert:function() { //如果insert方法被绑定为事件，则this表示事件发生的对象 dbApp.db.transaction(function(tx) { tx.executeSql( "insert into goods(name,price) values(?,?)", [$("#name").val(), $("#price").val()], function(tx, result) { dbApp.log('添加数据成功'); //刷新 dbApp.select(); }, function(tx, error) { dbApp.log('添加数据失败' + error.message); }); }); }, //删除 del:function(id, link) { dbApp.db.transaction(function(tx) { tx.executeSql( "delete from goods where id=?", [id], function(tx, result) { dbApp.log('删除成功'); //查找a标签最近的一个tr父元素，移除 $(link).closest("tr").remove(); }, function(tx, error) { dbApp.log('删除失败' + error.message); }); }); }, //编辑 edit:function(id) { dbApp.db.transaction(function(tx) { tx.executeSql( "select id,name,price from goods where id=?", [id], function(tx, result) { $("#name").val(result.rows.item(0)["name"]); $("#price").val(result.rows.item(0)["price"]); $("#goodsId").val(result.rows.item(0)["id"]); dbApp.log("修改后请保存"); }, function(tx, error) { dbApp.log('编辑失败' + error.message); }); }); }, //更新 update:function() { if($("#goodsId").val()) { dbApp.db.transaction(function(tx) { tx.executeSql( "update goods set name=?,price=? where id=?", [$("#name").val(), $("#price").val(), $("#goodsId").val()], function(tx, result) { dbApp.log('更新成功'); dbApp.select(); $("#goodsId").val(""); }, function(tx, error) { dbApp.log('更新失败' + error.message); }); }); } else { dbApp.log("请选择要更新的记录 "); } } }; dbApp.init(); </script> </body> </html>

运行结果：

从上面的代码可以发现操作数据库，执行sql的方法存在大量的冗余，可以优化，优化后的代码如下：