h5前端 indexDB的增删改查

const indexDB =
  window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
class IndexDBCache {
  // 构造函数
  constructor() {
    this._db = null; //数据库
    this._transaction = null; //事务
    this._request = null;
    this._dbName = "we_chat_data"; //数据库名
    this._cacheTableName = "user_list"; //表名
    this._dbversion = 1; //数据库版本
  }
  // 打开数据库
  openDB(name) {
    this._dbName = name;
    return new Promise((resolve, reject) => {
      this._request = indexDB.open(this._dbName, this._dbversion); // 打开数据库

      // 数据库初次创建或更新时会触发
      this._request.onupgradeneeded = (event) => {
        let db = this._request.result;
        if (!db.objectStoreNames.contains(this._cacheTableName)) {
          db.createObjectStore(this._cacheTableName, {
            // 设置主键：不管是添加数据还是查询数据或者修改数据，都需要指定主键，即传递的参数必须包含key:'xxxx'
            keyPath: "key", // 设置主键
          });
        }
        // resolve(event);
      };

      // 数据库初始化成功
      this._request.onsuccess = (event) => {
        this._db = this._request.result;
        resolve(event);
      };
      // 数据库初始化失败
      this._request.onerror = (event) => {
        console.log("数据库初始化失败");
        reject(event);
      };
    });
  }
  // 关闭数据库
  closeDB() {
    this._db.close();
    // console.log("数据库关闭");
  }

  /**
   * @description : 新增数据
   * @param        {Object} params 添加到数据库中的数据 { key: 表名字key,必须保持唯一性, data: 数据 }
   * @return
   * @return       {重要！重要！因为一开始设置了主键名为key,所以次数的数据结构必须是{key:'xxxx',data:{xxxx}} ,key作为主键名必须存在。不需要一定为key,一开始设置的是什么这里就必须保持这个结构}
   * @Author      : huazf
   */
  addData(params) {
    // console.log("添加数据", params, this._db);
    return new Promise((resolve, reject) => {
      let transaction = this._db.transaction(this._cacheTableName, "readwrite");
      let store = transaction.objectStore(this._cacheTableName);

      let response = store.add(params);
      // 操作成功
      response.onsuccess = (event) => {
        // console.log("添加成功", event);
        resolve(event);
      };
      // 操作失败
      response.onerror = (event) => {
        console.log("添加失败", event);
        reject(event);
      };
    });
  }

  /**
   * @description : 通过主键读取数据
   * @param        {Object} key 数据的键 查询的主键
   * @return       {*}
   */
  getDataByKey(key) {
    // console.log(this._db, "查询数据", key);
    return new Promise((resolve, reject) => {
      let transaction = this._db.transaction(this._cacheTableName, "readonly");
      let objectStore = transaction.objectStore(this._cacheTableName);
      // 通过主键读取数据
      let response = objectStore.get(key);
      // 操作成功
      response.onsuccess = () => {
        // console.log("查询数据成功", response.result);
        resolve(response.result);
      };
      // 操作失败
      response.onerror = (event) => {
        console.log("查询数据失败", event);
        reject(event);
      };
    });
  }

  /**
   * @description : 新增数据
   * @param        {Object} updatedContent 需要更新的数据 { key: 表名字key,必须保持唯一性, data: 数据 }
   * @return
   * @return       {重要！重要！因为一开始设置了主键名为key,所以次数的数据结构必须是{key:'xxxx',data:{xxxx}} ,key作为主键名必须存在。不需要一定为key,一开始设置的是什么这里就必须保持这个结构}
   */
  updatedDataByKey(updatedContent) {
    // console.log(this._db, "更新数据", updatedContent);
    return new Promise((resolve, reject) => {
      let transaction = this._db.transaction(this._cacheTableName, "readwrite");
      let objectStore = transaction.objectStore(this._cacheTableName);
      // 通过索引读取数据
      // let request = objectStore.put({ key, content: updatedContent });
      let response = objectStore.put({
        key: updatedContent.key,
        data: updatedContent.data,
      });

      // 操作成功
      response.onsuccess = () => {
        // console.log("更新成功", response);
        resolve(response.result);
      };
      // 操作失败
      response.onerror = (event) => {
        console.log("更新失败", event);
        reject(event);
      };
    });
  }

  /**
   * @description : 通过主键删除数据
   * @param        {Object} key 数据的键 查询的主键
   * @return       {*}
   */
  deleteDataByKey(key) {
    return new Promise((resolve, reject) => {
      let transaction = this._db.transaction(this._cacheTableName, "readwrite");
      let store = transaction.objectStore(this._cacheTableName);
      let response = store.delete(key);
      // 操作成功
      response.onsuccess = (event) => {
        resolve(event);
      };
      // 操作失败
      // 操作失败
      response.onerror = (event) => {
        reject(event);
      };
    });
  }
  // 清空数据库数据此处只会把数据库里面的数据清空，数据库还在
  clearDB() {
    return new Promise((resolve, reject) => {
      let transaction = this._db.transaction(this._cacheTableName, "readwrite");
      let store = transaction.objectStore(this._cacheTableName);
      let response = store.clear();
      // 操作成功
      response.onsuccss = (event) => {
        resolve(event);
      };
      // 操作失败
      response.onerror = (event) => {
        reject(event);
      };
    });
  }

  //删除数据库，次数整个数据库前部删除
  deleteDB(dbName) {
    return new Promise((resolve, reject) => {
      // 打开或创建数据库
      var request = indexedDB.open(dbName);
      request.onsuccess = function (event) {
        console.log("Database opened successfully");

        // 获取数据库实例
        var db = event.target.result;

        // 关闭数据库，确保在删除前没有任何活动连接
        db.close();

        // 删除数据库
        var deleteRequest = indexedDB.deleteDatabase(dbName);

        deleteRequest.onsuccess = function (event) {
          // 删除成功后的回调
          console.log("Database deleted successfully");
        };

        deleteRequest.onerror = function (event) {
          // 删除失败的回调
          console.error("Database deletion failed: " + event.target.error);
        };

        deleteRequest.onblocked = function (event) {
          // 如果有其他标签页仍然在使用这个数据库，删除操作会被阻塞
          console.warn("Database deletion is blocked");
        };
      };
    });
  }
}
export default IndexDBCache;

vue3中使用

<script setup>

import {  onMounted} from "vue";

import IndexDBCache from "@/path/indexDB.js"; // 你的文件的位置
let indexDB = new IndexDBCache(); // 初始化indexedDB函数


//添加
async function addItem(){
//必须等到打开indexdb后才能进行后面的操作，增删改查在同一个页面实例只用打开一次就行
//切换页面的时候需要重新打开
await indexDB.openDB(indexDBName)
indexDB.addData({key:'xxxx',data:{...}})

}

//删除某一条数据
async function deleteItem(){
// key为需要的那条数据
indexDB.addData(key)

}

//修改
async function addItem(){
//data为需要修改的数据，格式必须是下面的格式
indexDB.addData({key:'xxxx',data:{...}})

}

//查询
async function addItem(){
//key为查询的数据名字
indexDB.addData(key)
}

//删除整个数据库
async function deleteIndexDB(){
//indexDBName为要删除的数据库名字
indexDB.addData(indexDBName)
}

</script>

<template>
<button @click="addItem">添加< /button>
<button @click="deleteItem">删除< /button>
<button @click="uploadItem">更新< /button>
<button @click="getItem">查询< /button>
<button @click="deleteIndexDB">查询< /button>
</template>