Rumah > Artikel > hujung hadapan web > web前端如何更新缓存?单例模式封装opendatabase
本篇文章给大家带来的内容是关于web前端如何更新缓存?单例模式封装opendatabase ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
如果不了解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 的全部介绍,如果您想了解更多有关HTML视频教程,请关注PHP中文网。
Atas ialah kandungan terperinci web前端如何更新缓存?单例模式封装opendatabase. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!