web前端如何更新缓存？单例模式封装opendatabase

互联网 18-10-17

本篇文章给大家带来的内容是关于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中文网。

以上就是web前端如何更新缓存？单例模式封装opendatabase的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：单例模式封装opendatabase