webstorage示例

最新推荐文章于 2021-04-19 11:40:14 发布

打八阿哥

最新推荐文章于 2021-04-19 11:40:14 发布

阅读量143

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_45457760/article/details/115839744

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

    <style>
        .but{
            float: left;
            margin-right: 20px;
        }
        form{
            width: 300px;
        }
        .inp{
            width: 250px;
        }
    </style>

<body>
    <!-- 示例 -->
    <fieldset style="width: 300px;">
        <legend>基于websql的学生信息查询</legend>
            <p>输入信息</p>
            <p>学号</p>
            <input type="number" id="id" class="inp">
            <p>姓名</p>
            <input type="text" id="name" class="inp">
            <br>
            <br>
            <input type="button" name="insert" value="增" class="but" onclick="insert()">
            <input type="button" name="del" value="删" class="but" onclick="del()">
            <input type="button" name="update" value="改" class="but" onclick="update()">
            <input type="button" name="select" value="查" class="but" onclick="get()">
            <br>
            <!-- 存放查询结果 -->
            <div id="test"></div>
    </fieldset>

    <script>
        // Web SQL数据库是Web端的关系型数据库，使用Sqlite数据库进行存储，可以使用SQL完成数据操作,已停止维护
        // 支持NULL空值/INTEGER整型/REAL浮点型/TEXT字符串/BLOB二进制大数据
        // openDatabase:打开数据库，不存在则创建
        // transaction:控制事务提交或回滚
        // executeSql:执行真正的SQL语句
        // 语法:openDatabase(dbName,dbVersion,dbDescribe,dbSize,callback());
        // dbName:指定数据库的名称
        // dbVersion：指定数据库的版本号
        // dbDescribe：指定数据库的描述说明
        // dbSize：指定数据库的大小，单位为字节
        // callback()：可选参数，指定回调函数
        let db;
        db = openDatabase("blue","1.0","学生信息数据库",1024*1024*3);
        // 创建表
        // function createTable(){
        //     db.transaction(function(tx){
        //         tx.executeSql(
        //             "create table if not exists blue(id integer primary key,name TEXT)",[],
        //             function(tx,rs){
        //                 alert("创建成功");
        //             },
        //             function (tx,error){
        //                 alert("创建失败,"+error.message);
        //             }
        //         )
        //     })
        // }
        // 示例 插入
        function insert(){
            let id = document.getElementById("id").value;
            let name = document.getElementById("name").value;
            // 开启一个事务
            db.transaction(function(tx){
            // 执行SQL语句
                tx.executeSql(
                    // "sql语句",
                    "insert into stu(id,name) values(?,?)",
                    // SQL语句中所需参数对应值
                    [parseInt(id),name],
                    // SQL语句执行成功后的回调函数
                    function(tx,res){
                        alert("插入成功");
                    },
                    // SQL语句执行失败后的回调函数
                    function (tx,error){
                        alert("插入失败,"+error.message);
                    }
                )
            })
        }

        function get(){
            console.log("select");
            db.transaction(function(tx){
                tx.executeSql(
                    "select * from stu",
                    [],
                    function(tx,res){
                        let data = res.rows;
                        let rows = data.length;
                        console.log(data[1].id);
                        console.log(rows);
                        for(let a = 0;a < rows;a++){
                            let dom = document.createElement('p');
                            dom.id = "a"+a;
                            document.getElementById("test").appendChild(dom);
                            document.getElementById("a"+a).innerHTML = "学号:" + data[a].id + "姓名:" + data[a].name
                        }
                    },
                    function(tx,error){
                        alert("查看失败,"+error.message);
                    }
                )
            })
        }
        function update(){
            let id = document.getElementById("id").value;
            let name = document.getElementById("name").value;
            db.transaction(function(tx){
                tx.executeSql(
                    "update stu set name=? where id=?",
                    [name,parseInt(id)],
                    function(tx,res){
                        alert("更新成功");
                    },
                    function (tx,error){
                        alert("更新失败,"+error.message);
                    }
                )
            })
        }
        function del(){
            let id = document.getElementById("id").value;
            db.transaction(function(tx){
                tx.executeSql(
                    "delete from stu where id=?",
                    [parseInt(id)],
                    function(tx,res){
                        alert("删除成功");
                    },
                    function (tx,error){
                        alert("删除失败,"+error.message);
                    }
                )
            })
        }


    </script>
</body>

打八阿哥

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webstorage示例

<style> .but{ float: left; margin-right: 20px; } form{ width: 300px; } .inp{ width: 250px; } </style><body> <!-- 示例 --&g...
复制链接

扫一扫