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的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！