基于IndexedDB的HTML5数据库列表设计与实现

最新推荐文章于 2024-07-08 18:14:28 发布
青枙如初
最新推荐文章于 2024-07-08 18:14:28 发布
阅读量256
点赞数
文章标签： html5
本文链接：https://blog.csdn.net/qq_49425703/article/details/124072272
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap.css" />
</head>
<style>
    .container {
        width: 1000px;
    }

    .info {
        margin-top: 20px;
    }

    .itemList {
        margin-left: 50px;
    }

    .item {
        margin-top: 5px;
    }

    .info .btn-info {
        width: 70px;
        margin: 10px 0 10px 130px;
    }

    .btn-success {
        margin-bottom: 5px;
    }
</style>

<body>
    <div class="container">
        <fieldset class="info">
            <legend>学生成绩信息</legend>
            <div class="itemList">
                <div class="item">
                    <label for="stuNo">学号：</label><input type="text" id="stuNo">
                </div>
                <div class="item">
                    <label for="stuName">姓名：</input></label><input type="text" id="stuName">
                </div>
                <div class="item">
                    <label for="stuClass">班级：</label><input type="text" id="stuClass">
                </div>
                <div class="item">
                    <label for="course">课程：</label><input type="text" id="course">
                </div>
                <div class="item">
                    <label for="birth">生日：</label><input type="text" id="birth">
                </div>
                <div class="item">
                    <label for="score">成绩：</label><input type="text" id="score">
                </div>
            </div>
            <button class="btn btn-info" onclick="save()">保存</button>
        </fieldset>
        <div class="show">
            <button class="btn btn-success" onclick="queryAll()">查询所有</button>
            <table class="table table-striped table-dark">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">学号</th>
                        <th scope="col">姓名</th>
                        <th scope="col">班级</th>
                        <th scope="col">课程</th>
                        <th scope="col">生日</th>
                        <th scope="col">成绩</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody class="tbody">

                </tbody>
            </table>
        </div>
    </div>
</body>
<script>
    //获取所有input盒子
    const inputs = document.querySelectorAll('input')
    let tbody = document.querySelector('.tbody')//获取元素
    let bool = false//控制更新阀门
    let sid = ''//存储 key值
    //打开数据库
    function openDB() {
        let db = null
        let req = indexedDB.open('mydb')

        return new Promise((resolve, reject) => {
            req.onerror = () => {
                console.log('打开/创建失败')
                reject('打开/创建失败')
            }
            req.onsuccess = (e) => {
                db = e.target.result
                console.log('打开成功')
                resolve(db)
            }
            req.onupgradeneeded = (e) => {
                db = e.target.result
                if (!db.objectStoreNames.contains('students')) {
                    //返回对象仓库
                    let store = db.createObjectStore('students', { keyPath: 'sid', autoIncrement: true })
                    //创建唯一索引 学号
                    store.createIndex('stuNo', 'stuNo', { unique: true })
                    //关闭数据库
                    db.close()
                }
            }
        })
    }
    //保存学生信息
    function save(e) {
        //打开数据库
        let result = openDB().then((db) => {
            //存储学生信息对象
            let datas = {}
            //获取input值
            for (let i of inputs) {
                datas[i.id] = i.value
            }
            //学号必填
            if (!datas.stuNo) return
            //添加事务
            let tx = db.transaction('students', "readwrite");
            let store = tx.objectStore('students');
            let reqAdd
            //保存数据
            if (!bool) {//添加数据
                reqAdd = store.add(datas)
            } else {//修改数据
                datas.sid = sid * 1
                reqAdd = store.put(datas);
            }
            reqAdd.onsuccess = e => {
                console.log("添加数据成功");
            };
            reqAdd.onerror = e => {
                console.log("添加数据失败");
            }
            //重置表单
            for (let a of inputs) {
                a.value = ''
            }
            bool = false
            //关闭数据库
            db.close()
        })
        //若已经查询所有 再次创建更新数据
        if (tbody.children.length > 0) {
            queryAll()
        }
    }
    //查询学生信息
    function queryAll() {
        //每次点击先清空
        tbody.innerHTML = ''
        //打开数据库
        let result = openDB().then((db) => {
            //开启事务
            let tx = db.transaction('students', "readwrite");
            //获取对象仓库
            let store = tx.objectStore('students');
            //创建游标
            let curReq = store.openCursor()
            //游标请求成功
            curReq.onsuccess = function (e) {
                //游标变量
                let cursor = this.result
                //获取游标的值
                if (cursor) {
                    // console.log(cursor.value)
                    let { value } = cursor
                    //将数据挂载到dom上
                    tbody.innerHTML += ` <tr>
                        <th scope="row">${value.sid}</th>
                        <td>${value.stuNo}</td>
                        <td>${value.stuName}</td>
                        <td>${value.stuClass}</td>
                        <td>${value.course}</td>
                        <td>${value.birth}</td>
                        <td>${value.score}</td>
                        <td>
                            <button type="button" class="btn btn-info" onclick="Thedelete(event)">删除</button>
                            <button type="button" class="btn btn-info" onclick="change(event)">修改</button>
                        </td>
                        </tr>`
                    cursor.continue()//获取成功移到下一个
                } else {//数据没有了
                    console.log('游标数据结束')
                }
            }
            //关闭数据库
            db.close()
        })
    }
    //修改某行数据
    function change(e) {
        //拿到当前行的 sid
        // console.log(e.target.parentNode.parentNode.children[0].innerHTML)
        sid = e.target.parentNode.parentNode.children[0].innerHTML
        bool = true//更新开启
        let result = openDB().then((db) => {
            //开启事务
            let tx = db.transaction('students', "readwrite");
            //获取对象仓库
            let store = tx.objectStore('students');
            let obj = store.get(sid * 1)//拿到点击数据对象
            obj.onsuccess = () => {
                //将数据放在input里
                for (let a of inputs) {
                    a.value = obj.result[a.id]
                }
                //关闭数据库
                db.close()
            }
        })
    }
    //删除某行数据
    function Thedelete(e) {
        let sid = e.target.parentNode.parentNode.children[0].innerHTML//获取key值
        let result = openDB().then((db) => {
            //开启事务
            let tx = db.transaction('students', "readwrite");
            //获取对象仓库
            let store = tx.objectStore('students');
            let delReq = store.delete(sid * 1)//删除数据
            delReq.onsuccess = () => {
                //更新数据
                queryAll()
                //关闭数据库
                db.close()
            }
        })
    }
</script>

</html>
青枙如初
关注
0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于IndexedDB的HTML5数据库列表设计与实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl.
复制链接

扫一扫