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

telephone05

已于 2023-04-17 10:27:25 修改

阅读量360

点赞数 1

文章标签： html5 前端

于 2023-04-17 10:23:36 首次发布

本文链接：https://blog.csdn.net/telephone05/article/details/130194286

版权

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>学生成绩信息</title>
   </head>
   <body>
       <fieldset>
           <legend>学生成绩信息</legend>
           <p><input type="hidden" id="id"></p>
           <p>学号：<input type="text" id="code"></p>
           <p>姓名：<input type="text" id="name"></p>
           <p>班级：<input type="text" id="clazz"></p>
           <p>课程：<input type="text" id="course"></p>
           <p>生日：<input type="text" id="birth"></p>
           <p>成绩：<input type="text" id="grade"></p>
           <button οnclick="save()">保存</button>
       </fieldset>
       <button οnclick="seach()">查询所有</button>
       <table border="1" id="mytable">
           <tr>
               <td>学号</td>
               <td>姓名</td>
               <td>班级</td>
               <td>课程</td>
               <td>生日</td>
               <td>成绩</td>
               <td>操作</td>
           </tr>
       </table>
   </body>
   <script>
       let dbReq;
       // 加载时创建数据库和表
       window.onload = function() {
           console.log("加载完成！");
           // 创建数据库
           dbReq = indexedDB.open('sdb', 1);
           dbReq.onupgradeneeded = function(e) {
               // 获取数据库对象
               let db = e.target.result;
               // 创建对象仓库
               let stores = db.createObjectStore("user", {
                   keyPath: "id",
                   autoIncrement: true
               });
               // 创建索引
               stores.createIndex("codeIndex", "code", {
                   unique: false
               });
               stores.createIndex("nameIndex", "name", {
                   unique: false
               });
               stores.createIndex("clazzIndex", "clazz", {
                   unique: false
               });
               stores.createIndex("courseIndex", "course", {
                   unique: false
               });
               stores.createIndex("birthIndex", "birth", {
                   unique: false
               });
               stores.createIndex("gradeIndex", "grade", {
                   unique: false
               });
               db.close();
           }
       }
       // 保存数据
       function save() {
           // 打开数据库
           dbReq = indexedDB.open("sdb");
           dbReq.onsuccess = function(e) {
               let id = document.getElementById("id").value;
               let code = document.getElementById("code").value;
               let name = document.getElementById("name").value;
               let clazz = document.getElementById("clazz").value;
               let course = document.getElementById("course").value;
               let birth = document.getElementById("birth").value;
               let grade = document.getElementById("grade").value;
               // 获取数据库
               let db = e.target.result;
               // 创建事务
               let tx = db.transaction("user", "readwrite");
               // 获取对象仓库
               let store = tx.objectStore("user");
               if (id == "") {
                   // 组装数据
                   let data = {
                       "code": code,
                       "name": name,
                       "clazz": clazz,
                       "course": course,
                       "birth": birth,
                       "grade": grade
                   };
                   store.add(data);
               } else {
                   // 组装数据
                   let data = {
                       "id": parseInt(id),
                       "code": code,
                       "name": name,
                       "clazz": clazz,
                       "course": course,
                       "birth": birth,
                       "grade": grade
                   };
                   store.put(data);
               }
               // 查询数据
               seach();
               // 关闭数据库
               db.close();
           }
       }
       // 查询所有数据
       function seach() {
           let mytable = document.getElementById("mytable");
           let html = "<tr><td >学号</td><td >姓名</td><td>班级</td><td >课程</td><td >生日</td><td >成绩</td><td >操作</td></tr>";
           dbReq = indexedDB.open("sdb");
           dbReq.onsuccess = function(e) {
               // 开启事务
               let db = e.target.result;
               let tx = db.transaction("user", "readwrite");
               // 获取对象仓库
               let store = tx.objectStore("user");
               // 创建游标
               let curReq = store.openCursor();
               // 游标请求成功
               curReq.onsuccess = function() {
                   // 游标变量
                   let cursor = this.result;
                   // 获取游标的值
                   if (cursor) {
                       html += "<tr>";
                       for (let key in cursor.value) {
                           if (key != "id") {
                               html += "<td>" + cursor.value[key] + "</td>";
                           }
                       }
                       html += "<td><a href='javascript:void(0)' οnclick='delet(" + cursor.value["id"] + ")'>删除</a>";
                       html += "<a href='javascript:void(0)' οnclick='update(" + cursor.value["id"] +
                           ")'>修改</a></td>";
                       html += "</tr>";
                       cursor.continue();
                   }
                   // 查询到的输入放入表格中
                   mytable.innerHTML = html;
               }
           }
       }
       // 删除数据
       function delet(id) {
           dbReq = indexedDB.open("sdb");
           dbReq.onsuccess = function(e) {
               let db = e.target.result;
               let tx = db.transaction("user", "readwrite");
               // 获取对象仓库
               let store = tx.objectStore("user");
               store.delete(id);
               seach();
           }
       }
       // 修改数据
       function update(id) {
           dbReq = indexedDB.open("sdb");
           dbReq.onsuccess = function(e) {
               let db = e.target.result;
               let tx = db.transaction("user", "readwrite");
               // 获取对象仓库
               let store = tx.objectStore("user");
               let ts = store.get(id);
               ts.onsuccess = function() {
                   // 获取修改对象的值
                   let user = this.result;
                   document.getElementById("id").value = user.id;
                   document.getElementById("code").value = user.code;
                   document.getElementById("name").value = user.name;
                   document.getElementById("clazz").value = user.clazz;
                   document.getElementById("course").value = user.course;
                   document.getElementById("birth").value = user.birth;
                   document.getElementById("grade").value = user.grade;
               }
               db.close();
               seach();
           }
       }
   </script>
</html>