indexedDB---浏览器本地数据库实现增删改查

于 2024-06-26 17:12:42 发布
阅读量1.1k 收藏 28
点赞数 16
文章标签： html5 javascript 前端 数据库 indexedDB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/I_am_shy/article/details/139991991
版权

关于indexedDB

indexedDB的基本使用，可以参考：indexedDB---掌握浏览器内建数据库的基本用法_indexdb浏览器使用-CSDN博客

indexedDB是浏览器本地数据库，既然是数据库就能够实现增删改查，了解了indexedDB的基本使用后，我们来实现它的增删改查功能

示例

这里使用音频文件上传的的示例，来演示本地数据库的增删改查功能，

整体要实现的功能简介：

        能够上传歌曲信息并存入数据库，可以从数据库中读取信息，并渲染出音频，可以对数据库的内容进行删除修改

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件上传</title>
</head>

<body>
  <!-- 多文件上传 -->
  <!-- <input type="file" name="" id="file" multiple> -->
  <div>
    <label for="file">存储歌曲</label>
    <input type="file" name="" id="file" style="display: none;">
    <input type="number" name="" value="1" id="index" style="width: 40px;">
    <button id="bt">获取歌曲</button>
    <button id="del">删除歌曲</button>
    <label for="update">修改歌曲</label>
    <input type="file" name="" id="update" style="display: none;">
  </div>

  <script src="db.js"></script>
  <script src="file.js"></script>
</body>

</html>

html部分主要包括5个交互，

  1. 文件上传存储到数据库（增）
  2. 一个索引框
  3. 根据索引获取上传的音频并渲染在页面（查）
  4. 根据索引删除数据库中的歌曲（删）
  5. 上传一个文件根据索引覆盖数据库中的数据对象（改）

还有一个修改数据对象值的方法，本示例中只提供了逻辑，没有实现交互，

 file.js交互的逻辑，input上传文件处理，按钮事件处理；

db.js数据库的逻辑操作，以下是主体结构


// 浏览器本地数据库
console.log(indexedDB);// window.indexedDB

// 使用indexedDB来存储文件。
// 打开数据库
const request = indexedDB.open('FileDatabase', 4);
let addFile;//添加文件的方法
let getFile;//读取文件的方法
let delFile;//删除文件的方法
let updateFile;//更新文件的方法
let updataVal;//更新文件对象值的方法
let getAllFile;//获取所有文件的方法

request.onerror = function (event) {
  console.error('数据库打开失败：', event.target.errorCode);

}

request.onupgradeneeded = function (event) {
  const db = event.target.result;
  // 创建一个存储对象
  db.createObjectStore('FileStore', { keyPath: 'id', autoIncrement: true });
  console.log('数据库储存对象（表）创建成功');
  // // 删除一个存储对象，只能在更新版本时删除
  // db.deleteObjectStore('FileStore');
  // console.log('数据库储存对象（表）删除成功');
}

request.onsuccess = function (e) {
  const db = e.target.result;
  console.log('数据库打开成功', db);

  // 添加文件
  
  // 读取文件
 

  // 删除文件
 

  // 更新文件
 

  // 获取所有文件
  
}

 添加文件

file.js

const file = document.getElementById('file');

// 添加歌曲
file.onchange = () => {
  console.log(file.files);
  for (item of file.files) {
    if (item.type == 'audio/mpeg') {
      console.log('音频文件');
      let blob = new Blob([item], { type: 'audio/mpeg' });
      let reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => {//读取的过程是异步的
        // console.log(reader.result);
        addFile({
          name: item.name,
          size: item.size,
          type: item.type,
          data: reader.result
        })
         // getAllFile();
      }
    }else{
      alert('请选择音频文件');
    }
    // if (item.type == 'image/jpeg') {
    //   console.log('图片文件');
    //   let blob = new Blob([item], { type: 'image/jpeg' });
    //   console.log(blob);
    //   let url = URL.createObjectURL(blob);
    //   console.log(url);
    //   let img = document.createElement('img');
    //   img.src = url;
    //   img.width = 200;
    //   document.body.appendChild(img);
    // }
    // if (item.size > 1024 * 1024 * 2) {
    //   console.log('文件大于2mb');
    // }
  }

}

       代码逻辑： 监听onchange事件，上传选择文件后触发，匹配音频类文件，读取到file类型数据（这里可以直接用file，不需要转blob也行，我这里转blob纯属多余操作），转成base64的data：url，然后将这个data:url和文件的其他数据，构成一个对象存入数据库

{

不熟悉blob和file操作可以参考：

js二进制数据，文件---blob对象_js 输出 blob-CSDN博客

js文件---file和fileReafer对象_js file-CSDN博客

}

// 添加文件
  addFile = function (file) {
    // 连接数据库的表，比获取读写权限，默认只读
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.add(file);
    re.onsuccess = function (event) {
      console.log('文件添加成功');
    }
  }

代码解读：获取事务连接，连接数据库的表，并获取读写权限，

获取数据对象表的实例

通过add方法添加一个对象到FileStore的表中，这个过程是异步的要等待结构

 

成功保存了数据，可以在控制台查看

获取文件

file.js

// 获取歌曲
document.getElementById('bt').onclick = () => {
  getFile(Number(index.value),getAudio);
};

const getAudio = (res) => {

  let span = document.createElement('span');
  span.innerText = res.name;
  document.body.appendChild(span);

  let audio = document.createElement('audio');
  audio.src = res.data;
  audio.controls = true;
  document.body.appendChild(audio);

}

点击按钮开始读取数据，但是这里要注意，读取过程是异步的，拿到数据后要进行操作，只能等异步读取完成才行，这里采用回调函数的方式，传入拿到数据后的渲染操作，还有第一个参数应该是number类型，input的值是string类型，需要转换类型，否则无法读取到数据

db.js

 // 读取文件
  getFile = function (id, callback) {
    const transaction = db.transaction(['FileStore'], 'readonly');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.get(id);
    re.onsuccess = (e) => {
      console.log(e.target.result)
      callback(e.target.result);
    }
    re.onerror = function (event) {
      console.error('文件读取失败：', event.target.errorCode);
    }
  }

当数据读取成功后执行回调渲染音频数据

删除文件

 file.js

// 删除歌曲
document.getElementById('del').onclick = () => {
  delFile(Number(index.value));
  // getAllFile();
}

db.js

  // 删除文件
  delFile = function (id) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.delete(id);
    re.onsuccess = function (event) {
      console.log('文件删除成功');
    }
  }

和读取操作差不多

修改文件

file.js

// 更新歌曲
update.onchange = () => {
  for (item of update.files) {
    if (item.type == 'audio/mpeg') {
      console.log('音频文件');
      let blob = new Blob([item], { type: 'audio/mpeg' });
      let reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => {//读取的过程是异步的
        // console.log(reader.result);
        updateFile({
          id: Number(index.value),
          name: item.name,
          size: item.size,
          type: item.type,
          data: reader.result
        })
        // getAllFile();
      }
    }else{
      alert('请选择音频文件');
    }
  }

类似上传，但是要注意，修改要带上id键值， 

db.js

  // 更新文件
  updateFile = function (file) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.put(file);
    re.onsuccess = function (event) {
      console.log('文件更新成功');
    }
  }

查看数据库的表时，可能数据没有更新，可以手动刷新一下

修改值

db.js

  // 更新文件对象值
  updataVal = function (id,key,val) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    // 打开一个移动指针
    objectStore.openCursor().onsuccess = function (event) {
      const cursor = event.target.result;
      if (cursor) {// 指针存在，有数据
        console.log(cursor);
        if(cursor.value.id === id){// 匹配数据id
          let updateData = cursor.value;// 获取数据对象
          updateData[key] = val;// 修改对应键的值
          const re = cursor.update(updateData);// 将新的数据对象替换原数据对象，更新数据
          re.onsuccess = function (event) {
            console.log('更新成功',cursor.value);
          }
        }else{
          cursor.continue(); // 指针继续移动
        }
        
      }else{// 没有数据或者指针移出了数据列表
        console.log('没有更多数据了');
      }
    }
  }

  updataVal(1,'name','歌曲');

这个逻辑会复杂一些，这里用到了文件指针，它会指向存储对象表，可以像链表一样，移动遍历整个存储对象表，

第一首歌曲的name属性被改成了'歌曲'，

渲染对象数据表

为了让这些操作更直观，将渲染对象数据表的id和name属性渲染出来，并在页面载入后，和数据表变化时渲染最新数据

db.js

  // 获取所有文件
  getAllFile = function () {
    const transaction = db.transaction(['FileStore'], 'readonly');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.getAll();
    re.onsuccess = (e) => {
      const res = e.target.result
      let ul = document.createElement('ul');
      let li = document.createElement('li');
      li.innerText = "本地存储的歌曲"
      ul.appendChild(li);
      for (item of res) {
        let li = document.createElement('li');
        li.innerText = item.id + ":" + item.name;
        ul.appendChild(li);
      }
      document.body.appendChild(ul);
    }
  }
  getAllFile();

将所有数据读取，并渲染成列表，可以把前面注释的getAllFile()取消注释

这样就很直观的查看对象数据表的变化

完整代码展示

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件上传</title>
</head>

<body>
  <!-- 多文件上传 -->
  <!-- <input type="file" name="" id="file" multiple> -->
  <div>
    <label for="file">存储歌曲</label>
    <input type="file" name="" id="file" style="display: none;">
    <input type="number" name="" value="1" id="index" style="width: 40px;">
    <button id="bt">获取歌曲</button>
    <button id="del">删除歌曲</button>
    <label for="update">修改歌曲</label>
    <input type="file" name="" id="update" style="display: none;">
  </div>

  <script src="db.js"></script>
  <script src="file.js"></script>
</body>

</html>

file.js

const file = document.getElementById('file');
const update = document.getElementById('update');
const index = document.getElementById('index');

// 添加歌曲
file.onchange = () => {
  console.log(file.files);
  for (item of file.files) {
    if (item.type == 'audio/mpeg') {
      console.log('音频文件');
      let blob = new Blob([item], { type: 'audio/mpeg' });
      let reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => {//读取的过程是异步的
        // console.log(reader.result);
        addFile({
          name: item.name,
          size: item.size,
          type: item.type,
          data: reader.result
        })
        getAllFile();
      }
    }else{
      alert('请选择音频文件');
    }
    // if (item.type == 'image/jpeg') {
    //   console.log('图片文件');
    //   let blob = new Blob([item], { type: 'image/jpeg' });
    //   console.log(blob);
    //   let url = URL.createObjectURL(blob);
    //   console.log(url);
    //   let img = document.createElement('img');
    //   img.src = url;
    //   img.width = 200;
    //   document.body.appendChild(img);
    // }
    // if (item.size > 1024 * 1024 * 2) {
    //   console.log('文件大于2mb');
    // }
  }

}

// 更新歌曲
update.onchange = () => {
  for (item of update.files) {
    if (item.type == 'audio/mpeg') {
      console.log('音频文件');
      let blob = new Blob([item], { type: 'audio/mpeg' });
      let reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => {//读取的过程是异步的
        // console.log(reader.result);
        updateFile({
          id: Number(index.value),
          name: item.name,
          size: item.size,
          type: item.type,
          data: reader.result
        })
        getAllFile();
      }
    }else{
      alert('请选择音频文件');
    }
  }
}

// 获取歌曲
document.getElementById('bt').onclick = () => {
  getFile(Number(index.value),getAudio);
};

// 删除歌曲
document.getElementById('del').onclick = () => {
  delFile(Number(index.value));
  getAllFile();
}

const getAudio = (res) => {

  let span = document.createElement('span');
  span.innerText = res.name;
  document.body.appendChild(span);

  let audio = document.createElement('audio');
  audio.src = res.data;
  audio.controls = true;
  document.body.appendChild(audio);

}

db.js


// 浏览器本地数据库
console.log(indexedDB);// window.indexedDB

// 使用indexedDB来存储文件。
// 打开数据库
const request = indexedDB.open('FileDatabase', 4);
let addFile;//添加文件的方法
let getFile;//读取文件的方法
let delFile;//删除文件的方法
let updateFile;//更新文件的方法
let updataVal;//更新文件对象值的方法
let getAllFile;//获取所有文件的方法

request.onerror = function (event) {
  console.error('数据库打开失败：', event.target.errorCode);

}

request.onupgradeneeded = function (event) {
  const db = event.target.result;
  // 创建一个存储对象
  db.createObjectStore('FileStore', { keyPath: 'id', autoIncrement: true });
  console.log('数据库储存对象（表）创建成功');
  // // 删除一个存储对象，只能在更新版本时删除
  // db.deleteObjectStore('FileStore');
  // console.log('数据库储存对象（表）删除成功');
}

request.onsuccess = function (e) {
  const db = e.target.result;
  console.log('数据库打开成功', db);

  // 添加文件
  addFile = function (file) {
    // 连接数据库的表，比获取读写权限，默认只读
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.add(file);
    re.onsuccess = function (event) {
      console.log('文件添加成功');
    }
  }

  // 读取文件
  getFile = function (id, callback) {
    const transaction = db.transaction(['FileStore'], 'readonly');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.get(id);
    re.onsuccess = (e) => {
      console.log(e.target.result)
      callback(e.target.result);
    }
    re.onerror = function (event) {
      console.error('文件读取失败：', event.target.errorCode);
    }
  }

  // 删除文件
  delFile = function (id) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.delete(id);
    re.onsuccess = function (event) {
      console.log('文件删除成功');
    }
  }

  // 更新文件
  updateFile = function (file) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.put(file);
    re.onsuccess = function (event) {
      console.log('文件更新成功');
    }
  }

  // 更新文件对象值
  updataVal = function (id,key,val) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    // 打开一个移动指针
    objectStore.openCursor().onsuccess = function (event) {
      const cursor = event.target.result;
      if (cursor) {// 指针存在，有数据
        console.log(cursor);
        if(cursor.value.id === id){// 匹配数据id
          let updateData = cursor.value;// 获取数据对象
          updateData[key] = val;// 修改对应键的值
          const re = cursor.update(updateData);// 将新的数据对象替换原数据对象，更新数据
          re.onsuccess = function (event) {
            console.log('更新成功',cursor.value);
          }
        }else{
          cursor.continue(); // 指针继续移动
        }
        
      }else{// 没有数据或者指针移出了数据列表
        console.log('没有更多数据了');
      }
    }
  }

  // 获取所有文件
  getAllFile = function () {
    const transaction = db.transaction(['FileStore'], 'readonly');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.getAll();
    re.onsuccess = (e) => {
      const res = e.target.result
      let ul = document.createElement('ul');
      let li = document.createElement('li');
      li.innerText = "本地存储的歌曲"
      ul.appendChild(li);
      for (item of res) {
        let li = document.createElement('li');
        li.innerText = item.id + ":" + item.name;
        ul.appendChild(li);
      }
      document.body.appendChild(ul);
    }
  }


  getAllFile();
  // updateTest();
}

function updateTest(){
  updataVal(1,'name','江南.mp3');
  getAllFile();
}

I_am_shy
关注
indexedDB 增删改查
liuhao9999的博客
11-18 484
/** * 打开数据库 */ export function openDB() { return new Promise((resolve, reject) => { let indexedDB = window.indexedDB || window.webkitindexedDB; let request = indexedDB.open(conf.name); request.onerror = function (e) { .
html5+js 读写sqlite增删改查
03-13
html5+js 读写本地 sqlite增删改查，简洁明了。放到Android studio内直接使用，完美对接。
【前端】之IndexedDB实现增删改查，包含简单示例
飘逸者打瞌睡
12-13 1273
【代码】【前端】之IndexedDB实现增删改查，包含简单示例。
indexDB 实现用户的增删改查
weixin_53261137的博客
04-03 176
indexDB 实现用户的增删改查
Indexeddb 创建、增删改查
然后他就拿棍子来打我
10-18 7002
虽然小伙伴平时项目用到的不多，但了解它并会使用还是很有必要。以下是本人总结 IndexedDB 的常规使用方式. 2. 打开数据库 3. 监听 IndexedDB 版本更新 新建数据库时，新增数据表。 更新数据库时，对数据表进行更新。 效果图如下 效果图如下 效果图如下 效果图如下 效果图如下
学习H5indexedDB 增删改查
06-20
学习使用indexedDB,封装js进行本地浏览器的存储功能。
h5 indexDB table 简单的增删改查案列
09-26
实现了简单的增删改查demo，适用于谷歌，没做过其他浏览器的适配
本地存储IndexedDB 增删改查
qq_29885565的博客
11-27 667
最近遇到一个项目需要存储大量的数据，对比了一下各种存储，indexDB是最符合要求的，其特点就不列出来了，还是直接上代码吧。。indexDB的增删改查基本涵盖了，查询有根据主键查询，自己另外设置了索引，所以有相应的索引查询，然后另外写了一个模糊查询。有错误欢迎指正~ `let myDB = { name: ‘myDB’, version: 1, db: null, ojstore: { name:...
IndexedDB增删改查插件，分别对增删改查进行了封装，调用对应的函数即可
06-05
在浏览器上有两种数据库：webSQL和IndexedDB。但是如果在浏览器上需要用到数据库一般会使用Indexed DB数据库，webSQL基本上已经废弃了，具体原因小伙伴可以下来自己查查。 IndexedDB 是一种底层 API，用于在客户端...
手把手实现IndexedDB封装实现增删改查以及模糊查询方法
Deku_Ln的博客
04-10 3105
亲测IndexedDB封装实现增删改查模糊查询方法IndexedDB简介话不多说直接开始第一步 创建数据库第二步 增加数据第三步 查询数据第四步 获取所有数据第五步 删除数据第六步 更改数据第七步 关闭数据库第八步 删除数据库第九步 模糊查询创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 In...
JS一个表的增删改查
11-05
在JavaScript编程中，"增删改查"（CRUD，Create、Read、Update、Delete）是四个基本操作，用于管理数据库或数据集合中的记录。在这个场景中，我们使用JavaScript配合AJAX技术来实现对一张数据表的操作，并且压缩包内...
IndexedDB 封装数据库增删改查方法
Igiveufireworks的博客
01-15 512
注意: 调用方法时要用async await。
IndexedDB-增增删改查示例
u013798595的博客
01-22 530
【代码】IndexedDB-增查示例。
Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试_chrome控制台如何修改indexdb的数据(1)
最新发布
2401_85013211的博客
05-16 737
要了解有关此功能的更多信息，请访问。
js indexDB小白入门，增删查改，判断key是否存在
wnk1997的博客
03-24 411
写的很好，转载下，顺便再写了个新方法，判断key存不存在数据库内，这样添加的时候开业先判断key存不存在，然后进行添加或者更新的操作，不然默认都是添加的话，添加key相同页面会报错。原文：https://blog.csdn.net/qq_41579192/article/details/121605983。
h5前端 indexDB的增删改查
weixin_49627031的博客
04-29 242
【代码】h5 indexDB的增删改查。
浏览器数据库IndexedDB
weixin_43901781的博客
08-18 2542
概述 随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。 Cookie 的大小不超过4KB，且每次请求都会发送回服务器； LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。 所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。 IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找
vue-indexeddb
09-19
vue-indexeddb是一个用于在Vue.js应用中使用IndexedDB的插件。IndexedDB是一种浏览器内置的数据库，可以在前端进行数据存储和检索操作。使用vue-indexeddb插件，你可以方便地在Vue.js应用中进行IndexedDB的操作，包括创建数据库、创建对象仓库（类似于表）、进行增删改查等。 在使用vue-indexeddb的时候，你需要在Vue实例的配置中指定使用的IndexedDB数据库名称和模式，并在需要使用IndexedDB的组件中引入并使用该插件提供的API进行数据库操作。 下面是一个使用vue-indexeddb的简单示例代码： ```javascript import Vue from 'vue' import VueIndexedDB from 'vue-indexeddb' Vue.use(VueIndexedDB, { version: 1, // 数据库版本号 database: 'test', // 数据库名称 schemas: [ // 数据库模式（对象仓库） { test: 'id, title, created_at, updated_at' }, { posts: 'id, owner' } ] }) new Vue({ el: '#app', render: h => h(App) }) ``` 以上代码中，使用了Vue.use方法来安装vue-indexeddb插件，并在配置中指定了数据库版本号、数据库名称和模式（对象仓库）。然后在Vue实例的配置中引入了vue-indexeddb插件，并在组件中使用插件提供的API进行数据库操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值