您的位置 首页 html教程

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中文网。

以上就是web前端如何更新缓存?单例模式封装opendatabase的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:web前端如何更新缓存?单例模式封装opendatabase

文章地址:https://www.pyhw.net/34208_web%e5%89%8d%e7%ab%af%e5%a6%82%e4%bd%95%e6%9b%b4%e6%96%b0%e7%bc%93%e5%ad%98%ef%bc%9f%e5%8d%95%e4%be%8b%e6%a8%a1%e5%bc%8f%e5%b0%81%e8%a3%85opendatabase.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图