html5使用indexed DB数据库实现雇员信息的增删改查

题目：

自己设计界面，使用indexed DB数据库实现雇员信息的增删改查，雇员信息必须包含（雇员id、姓名、所属部门、入职日期、职位、薪资）

html界面：

<div style="width: 30%;margin: 10% auto;">
        <form action="">
            <fieldset>
                <legend>雇员信息</legend>
                <div>
                    <label for="userid">ID</label>
                    <input type="text" name="userid" id="userid" placeholder="请输入雇员id">
                </div>
                <div>
                    <label for="">姓名</label>
                    <input type="text" name="username" id="username" placeholder="请输入雇员id">
                </div>
                <div>
                    <!-- 部门 -->
                    <label for="department">部门</label>
                    <input type="text" name="department" id="department" placeholder="请输入雇员部门">
                </div>
                <div>
                    <!-- 入职日期 -->
                    <label for="date">入职日期</label>
                    <input type="text" name="date" id="date" placeholder="请输入雇员入职日期">
                </div>
                <div>
                    <!-- 职位 -->
                    <label for="position">职位</label>
                    <input type="text" name="position" id="position" placeholder="请输入雇员职位">
                </div>
                <div>
                    <!-- 薪资 -->
                    <label for="salary">薪资</label>
                    <input type="text" name="salary" id="salary" placeholder="请输入雇员薪资">
                </div>
                <div>
                    <input type="button" value="新增" class="button" id="insert">
                    <input type="button" value="查看" class="button" id="select">
                    <input type="button" value="修改" class="button" id="update">
                    <input type="button" value="删除" class="button" id="delete">
                </div>
            </fieldset>

        </form>
    </div>

效果：

重头戏：

<script>
        //获取四个button
        let insert = document.getElementById("insert");
        let select = document.getElementById("select");
        let update = document.getElementById("update");
        let deleteE = document.getElementById("delete");



        //创建数据库
        let request = indexedDB.open("employee");
        let db;
        request.onsuccess = function(e) {
            db = e.target.result;
            console.log("数据库打开成功");
        }
        request.onerror = function(e) {
            console.log("数据库打开失败");
        }
        request.onupgradeneeded = function(e) {
            db = e.target.result;

            //创建数据仓库
            let store;
            if (!db.objectStoreNames.contains("employee")) {
                let item = {
                    keyPath: "id",
                    autoIncrement: false
                };
                store = db.createObjectStore("employee", item);

                //创建索引
                store.createIndex("nameIndex", "name", {
                    unique: false
                });
            }
        }

        //获取数据并将数据转成json格式
        function get() {
            //获取输入框的值
            let userid = document.getElementById("userid").value;
            let username = document.getElementById("username").value;
            let department = document.getElementById("department").value;
            let startdate = document.getElementById("date").value;
            let position = document.getElementById("position").value;
            let salary = document.getElementById("salary").value;

            let data = {
                id: userid,
                name: username,
                department: department,
                date: startdate,
                position: position,
                salary: salary
            }
            return data;
        }

        //新增数据
        insert.onclick = function() {
            let data = get();
            let tx = db.transaction(["employee"], "readwrite"); //开启事务
            let store = tx.objectStore("employee");
            let addRequest = store.add(data);
            addRequest.onsuccess = function() {
                layer.msg('新增数据成功', {
                    icon: 1
                });
            }
            addRequest.onerror = function() {
                layer.msg('新增数据失败', {
                    icon: 2
                });
            }
        }

        //修改数据
        update.onclick = function() {
            //获取数据
            let data = get();
            //开启一个事务
            let tx = db.transaction("employee", "readwrite");
            let store = tx.objectStore("employee");

            let putRequest = store.put(data);
            putRequest.onsuccess = function() {
                layer.msg('修改数据成功', {
                    icon: 1
                });
            }
            putRequest.onerror = function() {
                layer.msg('修改数据失败', {
                    icon: 2
                });
            }
        }

        //删除数据
        deleteE.onclick = function() {
            //询问需要删除一条数据还是删除所有
            layer.confirm("您想要删除全部数据还是一条数据？", {
                title: '删除',
                btn: ['全部', '一条']
            }, function() {
                let tx = db.transaction(["employee"], "readwrite");
                let store = tx.objectStore("employee");
                let clearReq = store.clear();
                clearReq.onsuccess = function() {
                    layer.msg('删除所有数据成功', {
                        icon: 1
                    })
                }
                clearReq.onerror = function() {
                    layer.msg('删除数据失败', {
                        icon: 2
                    })
                }
            }, function() {
                parent.layer.prompt({
                    title: '请输入待删除的雇员id'
                }, function(val, index) {
                    let id = val;
                    //开启一个事务
                    let tx = db.transaction(["employee"], "readwrite");
                    let store = tx.objectStore("employee");

                    let delRequest = store.delete(id);
                    delRequest.onsuccess = function() {
                        layer.msg('删除数据成功', {
                            icon: 1
                        })
                    }
                    delRequest.onerror = function() {
                        layer.msg('删除数据失败', {
                            icon: 2
                        })
                    }
                    layer.close(index); //关闭prompt
                })
            })
        }

        //查看数据
        select.onclick = function() {
            layer.confirm("您想要查询全部数据还是一条数据？", {
                title: '查询',
                btn: ['全部', '一条']
            }, function() {
                //查询所有数据
                let tx = db.transaction(["employee"], "readwrite");
                let store = tx.objectStore("employee");
                let cursorRequest = store.openCursor();
                let result = [];
                cursorRequest.onsuccess = function(e) {
                    let cursor = e.target.result;
                    open = false;
                    if (cursor) {
                        result.push(cursor.value);
                        cursor.continue();
                    } else {
                        parent.layer.open({
                            title: '查询结果',
                            type: 1,
                            skin: 'layui-layer-rim',
                            area: ['600px', '400px'],
                            content: JSON.stringify(result), //将查询结果转为字符串格式
                            shadeClose: true,
                        });
                    }

                }

            }, function() {
                //查询单条数据
                parent.layer.prompt({
                    title: '请输入待查询的雇员id'
                }, function(val, index) {
                    //开启一个事务
                    let tx = db.transaction(["employee"], "readwrite");
                    let store = tx.objectStore("employee");
                    let getRequest = store.get(val);
                    getRequest.onsuccess = function() {
                        let result = getRequest.result;
                        parent.layer.open({
                            title: '查询结果',
                            type: 1,
                            skin: 'layui-layer-rim',
                            area: ['600px', '400px'],
                            content: JSON.stringify(result), //将查询结果转为字符串格式
                            shadeClose: true,
                        });
                    }
                })
            })
        }
    </script>

若有不足，望提出。