indexDB实现用户的删除和修改

已于 2023-04-26 08:58:36 修改
阅读量1.1k 收藏 5
点赞数 9
分类专栏： h5+c3 文章标签： javascript html5 前端
于 2022-04-08 23:55:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50951790/article/details/124053679
版权

IndexedDB 数据库 对象仓库 保存数据 查询数据
关键词由CSDN通过智能技术生成 
<!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>indexDB</title>
</head>
<body>
    <h1>index DataBase</h1>
    <p><input type="button" name="" id="" value="创建数据库" onclick="creatDB()">
       <input type="button" name="" id="" value="创建对象仓库" onclick="creatObjectStore()">
    </p>
    <hr>
    <fieldset>
        <legend>用户信息</legend>
        <input type="hidden" name="" id="id">
        <p>学号：<input type="text" name="" id="code"></p>
        <p>姓名：<input type="text" name="" id="name"></p>
        <p>班级：<input type="text" name="" id="class2"></p>
        <p>课程：<input type="text" name="" id="project"></p>
        <p>生日：<input type="text" name="" id="birth"></p>
        <p>成绩：<input type="text" name="" id="score"></p>
        
        <p><input type="button" value="保存" onclick="saveDB()"></p>
        <p><input type="button" value="查询数据" onclick="seachDB()"></p>
    </fieldset>
    <br>
    <table border="1" id="detail" class="datatable">
       
    </table>
    <!-- <p><span id="detail"></span></p> -->
</body>
<script>
    let dbReq;
    let db;
    //1.创建数据库
    function creatDB(){
        //第一个是数据库名称，第二个是版本号（必须为整数）
       dbReq = indexedDB.open("sdb",1)
       dbReq.onsuccess = function(){
           alert("数据库创建成功")
       }
       dbReq.onerror = function(){
           alert("数据库创建失败")
       }
    }

    //2.创建对象仓库
    function creatObjectStore(){
        //更新版本
        dbReq = indexedDB.open("sdb",2);
        //获取版本更新事件
        dbReq.onupgradeneeded = function(){
            //获取数据库实例
            db=this.result
         
            //第一个是仓库名称，第二个是keyPath键和是否自增长,autoIncrement默认false
            let store = db.createObjectStore("student",{keyPath:"id",autoIncrement:true})

            //创建索引,第一个索引名，第二个字段名，第三个是表示是否重复
            //store.createIndex("idIndex","id",{unique:false})
            store.createIndex("codeIndex","code",{unique:false})
            store.createIndex("nameIndex","name",{unique:false})
            store.createIndex("class2Index","class2",{unique:false})
            store.createIndex("projectIndex","project",{unique:false})
            store.createIndex("birthIndex","birth",{unique:false})
            store.createIndex("scoreIndex","score",{unique:false})
            //关闭数据库
            db.close();
        }
    }

    //保存数据
    let id = document.querySelector("#id")
    let code = document.querySelector("#code")
    let name = document.querySelector("#name")
    let class2 = document.querySelector("#class2")
    let project = document.querySelector("#project")
    let birth = document.querySelector("#birth")
    let score = document.querySelector("#score")
    let detail = document.querySelector("#detail")
   
    function saveDB(){
        //1.打开数据库
        dbReq = indexedDB.open("sdb");

        dbReq.onsuccess = function(){
            //2.成功事件中获取到数据库
            db=this.result;
            //3.创建事务(第一个参数，操作对象仓库的名称。第二个参数，操作权限)
            let tx =db.transaction("student","readwrite");
            //4.操作对象仓库中的数据
            let store = tx.objectStore("student");
            //5.组装数据
             let data = {
                "code":code.value,
                "name":name.value,
                "class2":class2.value,
                "project":project.value,
                "birth":birth.value,
                "score":score.value
            }
           
            console.log(id.value)
            if(id.value!=""){
                    data = {
                "id":parseInt(id.value),
                "code":code.value,
                "name":name.value,
                "class2":class2.value,
                "project":project.value,
                "birth":birth.value,
                "score":score.value
            }
                    console.log(data)
                    var i = store.put(data)
                    i.onsuccess=function(){
                        console.log(111)
                    }
                    i.onerror=function(e){
                        console.log(e)
                    }
                    
            }
           else{
                store.add(data);
           }
           
            
            //6.关闭数据库
            db.close();
            seachDB();
        }
    }

    //查询数据
    function seachDB(){
        let tr ="<tr><td>学号</td><td>姓名</td><td>班级</td><td>课程</td><td>生日</td><td>成绩</td><td>操作</td></tr>"

         //1.打开数据库
         dbReq = indexedDB.open("sdb");

            dbReq.onsuccess = function(){
                //2.成功事件中获取到数据库
                db=this.result;
                //3.创建事务(第一个参数，操作对象仓库的名称。第二个参数，操作权限)
                let tx =db.transaction("student","readwrite");
                //4.操作对象仓库中的数据
                let store = tx.objectStore("student");
                //5.获取数据

                //获取多个数据，创建游标
                let curReq = store.openCursor();
                curReq.onsuccess=function(){
                    let curValue = this.result;
                    if(curValue){
                        tr += "<tr><td>"+curValue.value.code +
                                            "</td><td>"+ curValue.value.name+
                                            "</td><td>"+curValue.value.class2+
                                            "</td><td> "+curValue.value.project+
                                            "</td><td>  "+curValue.value.birth+
                                            "</td><td>  "+curValue.value.score+
                                            "</td><td>"+"<a href='javascript:del(" + curValue.value.id + ")'>删除</a>"+
                                            " "+"<a href='javascript:updata(" + curValue.value.id + ")'>修改</a></td><tr>";
                        curValue.continue();
                    }
                    detail.innerHTML=tr;
                }
                //6.关闭数据库
                db.close();
            }
    }
    
    //删除
    function del(key){
        //1.打开数据库
        dbReq = indexedDB.open("sdb");
            dbReq.onsuccess = function() {
                // 2.成功事件中获取数据库实sdb
                db = this.result;
                //3.创建事务
                let tx =db.transaction("student","readwrite");
                // 4.操作对象仓库中的数据
                let store = tx.objectStore("student");
                let dele = store.delete(key);
                dele.onsuccess = function(){
                    seachDB()
                }
            }
    }

    //修改
    function updata(id){
        //1.打开数据库
        dbReq = indexedDB.open("sdb");
            dbReq.onsuccess = function() {
                // 2.成功事件中获取数据库实sdb
                db = this.result;
                //3.创建事务
                let tx =db.transaction("student","readwrite");
                // 4.操作对象仓库中的数据
                let store = tx.objectStore("student");
                let ts = store.get(id);
                ts.onsuccess = function(){
                   let student = this.result;
                //    console.log(student)
                   document.getElementById("id").value=student.id;
                   document.getElementById("code").value=student.code;
                   document.getElementById("name").value=student.name;
                   document.getElementById("class2").value=student.class2;
                   document.getElementById("project").value=student.project;
                   document.getElementById("birth").value=student.birth;
                   document.getElementById("score").value=student.score;
                  
                //    del(id)
                }
                 
            }
    }

</script>
</html>

效果图：

万能守恒定律
关注
  • 9
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
web前端-在迷惘中的探索HTML5（二）本地存储之IndexDB
nongshuqiner的博客
02-28 1490
今天原本打算继续出VUE系列的教程，结果由于今天被要求从数据库请求一个压缩文件，然后放置在页面上在线浏览，我就去查相关的关于HTML5的indexDB本地数据库存储，结果网上的教程一个比一个烂我愣是看了3个小时竟然没看懂（靠，老子还学过不过忘了而已），一气之下，妈的指望别人不如靠自己。于是史上最简单的indexDB教程就要问世了 前言吹完牛逼就该拿出真本事，众所周知，HTML5出现了本地存储系列套餐
前端持久化存储技术总结Cookies/WebStorage/indexDB
weixin_44199924的博客
07-07 1910
前端的存储技术也有不少，cookie、web storage、indexDB等，下面进行更详细的介绍： List item Cookie（小型文本文件、小甜饼） 正是因为有了cookie技术，可以让http协议实现有状态（http协议本来是没有状态的协议） cookie特点： cookie大小约限制在4kb 存储在客户端本地，请求服务器时放在http请求头里面（不论是否需要，都会放在请求头里面） 文件以key-value的形式存储数据 ...
h5 indexDB table 简单的增删改查案列
09-26
实现了简单的增删改查demo，适用于谷歌，没做过其他浏览器的适配
indexedDB（二）添加、修改、删除篇
qq_38935512的博客
09-25 5366
前言 上篇讲了简单的创建了一个数据库和两个表，这里就详细记录下查询； 这里先定义二个数组对象 data(){ return { arr:[ {id:1,name:'杨姐',age:18,sex:0}, {id:2,name:'骏驰',age:33,sex:0}, {id:3,name:'king',age:45,sex:1}, {id:4,name:'浩杰',age:16,sex:0}, {id:5,name
indexedDB---浏览器本地数据库实现增删改查
I_am_shy的博客
06-26 1087
indexedDB是浏览器本地数据库，既然是数据库就能够实现增删改查，了解了indexedDB的基本使用后，我们来实现它的增删改查功能, 这里使用音频文件上传的的示例，来演示本地数据库的增删改查功能，
清理indexDB浏览器数据库的方法 浏览器数据库清除
weixin_30412013的博客
11-09 2959
目前，主流浏览器自身的存储方式有：1、cookie ；2、localstorage 和 3、indexDB（浏览器数据库）。 本篇文档主要讲的是怎么清理和删除浏览器的indexDB数据库，三种存储方式的区别和使用方法，百度上的经验贴太多了，需要了解的自行搜索。 写这篇帖子，主要是因为目前还没有中文贴描述怎么快速清除（清理）indexDB（浏览器数据库）的方法。 清理方法如下： 1、...
学习H5indexedDB 增删改查
06-20
学习使用indexedDB,封装js进行本地浏览器的存储功能。
【前端】之IndexedDB实现增删改查，包含简单示例
飘逸者打瞌睡
12-13 1266
【代码】【前端】之IndexedDB实现增删改查，包含简单示例。
AgregarCitas：Proyecto para agregar citas hecho con JavaScript和con de detotos IndexDB
02-20
此外，为了确保良好的用户体验，开发者可能还会实现错误处理机制，如捕获数据库操作失败的情况，以及数据同步功能，以便在网络恢复时同步用户的本地更改到远程服务器。 **学习路径** 要深入理解和复刻这个项目，你...
【前端面试】一篇讲透客户端存储——IndexedDB、Cookie……
最新发布
hhhh
08-20 1109
IndexedDB 是一种在用户浏览器中运行的客户端存储技术，它允许网页应用程序存储大量结构化数据。IndexedDB 存储空间的底层实际上是使用用户的本地文件系统来存储数据的。：IndexedDB 数据存储在用户的文件系统中，但具体位置对于用户来说是抽象的，并且由浏览器管理。：浏览器为每个域（或称为源）创建和管理一个或多个数据库文件。这些文件通常位于用户的个人文件夹中，例如在 Linux 上，或者在 Windows 上的AppData目录下。
html将用户数据保存,html5几种在客户端存储数据的实例详解
weixin_29630465的博客
06-04 958
1.Application CacheHTML5引入应用缓存，意味着web应用可以进行缓存，即使在没有网络的情况下也能使用。application cache有三个特点离线浏览已缓存的资源加载速度更快减少服务器负载，浏览器将只从服务器下载更新过或更改过的资源使用方法就是在 html标签中添加一个manifest属性每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 mani...
Indexeddb 创建、增删改查
然后他就拿棍子来打我
10-18 6952
虽然小伙伴平时项目用到的不多，但了解它并会使用还是很有必要。以下是本人总结 IndexedDB 的常规使用方式. 2. 打开数据库 3. 监听 IndexedDB 版本更新 新建数据库时，新增数据表。 更新数据库时，对数据表进行更新。 效果图如下 效果图如下 效果图如下 效果图如下 效果图如下
前端数据库indexDB删除数据delete()方法
weixin_43797504的博客
05-30 3903
indexDB删除的错误问题 IDBObjectStore.delete(keyorKeyRange) 在学习前端indexDB数据库遇到了问题 想删除数据库其中的一条数据时候代码 如下： function remove(key) { var request = db.transaction(['person'], 'readwrite') .objectStore('perso...
JavaScript笔记之indexedDB的轻量化使用(增删改查)
Spider_wang的博客
05-04 1861
前些日子尝试使用 HTML5 的 indexedDB，发现标准提出来的非关系型数据库真的很难用，根据自己理解基于 indexedDB 封装了一个轻量级的数据库管理类，能够快速的建表、存数据。 1.需求分析 介于 indexedDB 不人性化的事务操作，以及神奇的建表逻辑（只能通过升级数据库，在升级事件内建表！），考虑自己实际需求做了以下的取舍： 因为轻量级原因，我只需要建多张表而不需要建数据库，因此全局只要维护一个数据库实例即可； 因其离谱的建表逻辑（也有可能我没把握住），通过多次尝试，最终选择在需要.
angular中的添加和批量删除
MincingMachine的博客
12-07 301
.tab{                 width: 500px;             }                            用户名:         价格:         数量:                                                          球类单价数量总价操作           
数据库批量增删改查工具
weixin_30298497的博客
05-15 100
目录结构： 从sql.txt读取sql语句，将运行结果写到result.txt batch.java import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.I...
简介 IndexedDB 及详解 IndexedDB 在实际项目中可能存在的问题与解决方案
caod1991的博客
01-06 5379
简介IndexedDB 详细文档请参看 MDN 文档链接 IndexedDB能做什么： 它真的很能存东西！ 对比cookie， local storeage， session storage 等受到大小限制的web存储方式， IndexedDB在理论上并无大小限制只与本地的磁盘相关。 这也是选择它作为web本地存储工具最大的理由。 完整的API文档（ 虽然大部分是英文Orz）， 不懂的直接翻文档...
前端浏览器自带数据库增删改查操作：indexdDB的基础使用
全易
10-28 1592
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。
indexDB 批量删除数据
04-04
使用IndexDB批量删除数据，需要使用transaction来处理删除操作。以下是一个示例代码： ```javascript // 打开数据库 const request = indexedDB.open('myDatabase', 1); let db; request.onsuccess = function(event) { db = event.target.result; // 开启事务 const transaction = db.transaction(['myObjectStore'], 'readwrite'); const objectStore = transaction.objectStore('myObjectStore'); // 删除多个数据 const deleteRequests = [1, 2, 3].map((id) => objectStore.delete(id)); // 监听所有删除请求完成 Promise.all(deleteRequests) .then(() => { console.log('数据删除成功'); }) .catch((error) => { console.error('数据删除失败', error); }); // 提交事务 transaction.oncomplete = function() { console.log('事务提交成功'); }; }; ``` 上述代码首先打开数据库，并开启一个读写事务。然后使用`map`方法创建多个删除请求，并将这些请求存储在一个数组中。接着使用`Promise.all`方法监听所有删除请求完成，如果所有请求都成功完成，则输出“数据删除成功”，否则输出“数据删除失败”。最后提交事务，如果事务提交成功，则输出“事务提交成功”。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值