webSQL的使用

最新推荐文章于 2023-12-24 23:25:49 发布

zhanghao86_

最新推荐文章于 2023-12-24 23:25:49 发布

阅读量294

点赞数 1

分类专栏： web前端文章标签： html5 websql 离线缓存本地存储

本文链接：https://blog.csdn.net/zhanghao86_/article/details/77012148

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>





<script>

    (function () {

        // 创建全局变量db
        var db=null;
        function openDB() {
            // 打开数据库 openDatabase可返回数据库对象 通过全局变量db接收数据库对象
            // 需要传入数据库名字，版本号，数据库中显示的名字，数据库大小，成功后的回调函数
            db=openDatabase("noteDB","1.0","noteDB",1024*1024*10,function (result) {
                console.log(result);
                // 只有创建数据库成功才会调用
                db=result;
            });
            console.log(db);
        }
        // 创建写sql语句的函数，传入sql语句，参数数组，回调函数
        function createSQL(sql,args,callback) {
            // 创建事务对象
            db.transaction(function (ts) {
                console.log(ts);
                // 通过得到的事务对象 调用执行sql的方法 并传入sql语句
                // executeSql(sql语句，实参数组(得到的值得数组),成功的回调，失败的回调)
                ts.executeSql(sql,args,function (transaction,result) {

                    console.log(arguments);
                    if(callback){
                        // 将得到的结果集赋到回调函数里
                        callback(result);
                    }
                    // 错误的方法
                },function (error) {
                    console.log(error);
                });
            })
        }
        // 建表方法
        function createTable() {
            createSQL("CREATE TABLE user (id,username,age);");
        }
        // 添加数据
        function addData() {
            createSQL("INSERT INTO user (id,username,age) VALUES (3,'小网',14);")
        }
        // 查询数据
        function searchData() {
            createSQL("SELECT * FROM user;",[],function (result) {
                console.log(result.rows);
                var content="";
                for(var i=0;i<result.rows.length;i++){
                    // 将查询到的数据展示到界面上(此处只展示了username)
                    content+="<p>"+result.rows[i].username+"</p>";
                }
                document.body.innerHTML=content;
            })
        }
        // 删除数据
        function deleteData() {
            createSQL("DELETE FROM user WHERE id=2",[],function (result) {
                console.log(result);
                searchData();
            })
        }
        // 修改数据的方法
        function updateData() {
            // 两种方法
            createSQL("UPDATE user SET username='奥特曼' WHERE username='小张';",[],function () {
                searchData();
            });
            createSQL("UPDATE user SET username=? WHERE username='小网';",['奥特曼'],function () {
                searchData();
            });
        }
        // 初始化函数
        function init() {
            openDB();
            createSQL();
            // createTable();
            // addData();
            searchData();
            // deleteData();
            updateData();
        }
        init();

        // callee和caller的意义(面试)
        // callee:被调用的函数 caller：调用函数的对象
        // function aa() {
        //     console.log(arguments.callee.caller)
        // }
        // function bb() {
        //     aa()
        // }
        // bb()
    })();
</script>
</body>
</html>