如果不了解opendatabase数据库的 *** 作的各位，建议先学上一篇《web前端缓存之四opendatabase》后，再来看这一篇的内容，本章内容也是前端缓存系列的最后一遍，对opendatabase数据库的一个简单的封装，当然对于具有java基础的童鞋们，可以忽略此篇文章。
好了，废话不多说，直接直奔主题，请看正文吧（还是基于上一篇的实例来写的）：
<!DOCTYPE HTML><HTML><head> <Meta charset="UTF-8"> <Title>Title</Title></head><body><!--openDatabase与androID里面的sqlite差不多最好的选型存储--><h1>opendatabse数据库 *** 作</h1><button ID="btn-create">创建user数据表</button><button ID="btn-insert">插入数据</button><button ID="btn-query">查询数据</button><button ID="btn-update">修改数据</button><button ID="btn-delete">删除数据</button><button ID="btn-drop">删除user数据表</button><script type="text/JavaScript"> let findID = ID => document.getElementByID(ID); //模拟一条user数据 let user = { username: "liuqiang", password: "123569874", info: "beaconApp开发团队中一员" }; /** * 创建数据库 或者此数据库已经存在 那么就是打开数据库 * name: 数据库名称 * version: 版本号 * displayname: 对数据库的描述 * estimatedSize: 设置数据的大小 * creationCallback: 回调函数(可省略) */ let db = openDatabase("MysqL", "1.0", "我的数据库描述", 1024 * 1024); let result = db ? "数据库创建成功" : "数据库创建失败"; console.log(result); const USER_table_sql = "create table if not exists usertable (ID integer primary key autoincrement,username varchar(12)," + "password varchar(16),info text)"; const INSERT_USER_sql = "insert into usertable (username, password,info) values(?,?,?)"; const query_USER_sql = "select * from usertable"; const UPDATE_USER_sql = "update usertable set password = ? where username = ?"; const DELETE_USER_sql = "delete from usertable where username = ?"; const DROP_USER_sql = "drop table usertable"; /** * 封装数据库工具类 */ class DatabaseUtil { /** * 构造方法 * @param sqlSentence 数据库语句 * @param params 数据库 *** 作的参数 */ constructor(sqlSentence, ...params) { this.sqlSentence = sqlSentence; this.params = params; } //获取当前实例 static getInstance(sqlSentence, ...params) { return new DatabaseUtil(sqlSentence, ...params) } /** * 执行数据库 *** 作 * @param callback 成功的回调 * @param errorCallback 失败的回调 */ execute(callback, errorCallback) { db.transaction(tx => { tx.executesql(this.sqlSentence, this.params, callback, errorCallback) }) } } /** * 点击事件 增删查改 */ let btnCreate = findID("btn-create"); let btnInsert = findID("btn-insert"); let btnquery = findID("btn-query"); let btnUpdate = findID("btn-update"); let btnDelete = findID("btn-delete"); let btnDrop = findID("btn-drop"); //创建数据表 btnCreate.onclick = () => DatabaseUtil.getInstance(USER_table_sql) .execute(function (transaction, resultSet) { alert('创建user表成功:' + result); }, function (transaction, error) { alert('创建user表失败:' + error.message); }); //插入数据 btnInsert.onclick = () => DatabaseUtil.getInstance(INSERT_USER_sql, user.username, user.password, user.info) .execute(function (transaction, resultSet) { alert("添加数据成功") }, function (transaction, error) { alert("添加数据失败:" + error.message) }); //查询数据 btnquery.onclick = () => DatabaseUtil.getInstance(query_USER_sql) .execute(function (transaction, resultSet) { console.log(resultSet); }, function (transaction, error) { alert("查询失败:" + error.message) }); //修改数据 btnUpdate.onclick = () => { user.password = "111666666";//修改密码 DatabaseUtil.getInstance(UPDATE_USER_sql, user.password, user.username) .execute(function (transaction, resultSet) { alert("修改数据成功") }, function (transaction, error) { alert("修改数据失败:" + error.message) }) }; //删除数据 btnDelete.onclick = () => DatabaseUtil.getInstance(DELETE_USER_sql, user.username) .execute(function (transaction, resultSet) { alert("删除数据成功") }, function (transaction, error) { alert("删除数据失败:" + error.message) }); //删除数据表 btnDrop.onclick = () => DatabaseUtil.getInstance(DROP_USER_sql) .execute(function (transaction, resultSet) { alert("删除数据表成功") }, function (transaction, error) { alert("删除数据表失败:" + error.message) });</script></body></HTML> 总结 以上是内存溢出为你收集整理的web前端如何更新缓存？单例模式封装opendatabase全部内容，希望文章能够帮你解决web前端如何更新缓存？单例模式封装opendatabase所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）