indexDB的应用

web端有时候需要处理一些缓存数据用来减少页面请求，我们经常用localstorage存储，但是如果对localstorage中的数据增删改查localstorage就显得有点麻烦了。这里介绍一种indexDB的的方法会方便很多，以下是封装好的indexDB。 注：indexDB是window对象中的方法，因为uniapp和小程序中没有window对象，所以在uinapp或者小程序中indexDB存键值对的方法不可用，当然webview除外。 indexDB是非关系型数据库，存储的是键值对的方式，如果要是创建关系型数据库，请移步SQLite数据库。 indexDB可以在这里查看

// utils/db.js
class DB {
    constructor() {
      this.db = null;
    }
  
    async open(dbName, version) {
      if (!dbName || !version) {
        throw new Error('数据库名称、版本、描述不能为空')
      }
      return new Promise((resolve, reject) => {
        const request = window.indexedDB.open(dbName,version)
        
        request.onerror = (event) => {
          reject(event.target.error)
        }
        request.onsuccess = (event) => {
          this.db = event.target.result
          resolve(this.db)
        }
        request.onupgradeneeded = (event) => {
          this.db = event.target.result
          // 预先定义所有需要的表
          this.createTable('users', ['userName', 'password', 'id']);
          this.createTable('teachers', ['name', 'age', 'subject', 'id']);
        }
      })
    }
    createTable(tableName, fields) {
        if (!this.db.objectStoreNames.contains(tableName)) {
          const store = this.db.createObjectStore(tableName, {
            keyPath: 'id',
            autoIncrement: false
          });
          fields.forEach(field => {
            store.createIndex(field, field, { unique: false });
          });
          console.log(`表 ${tableName} 创建成功`);
        }
      }
    // 添加数据的专用方法
    async add(storeName, data) {
      if (!this.db) {
        throw new Error('数据库未连接');
      }
      return new Promise(async (resolve, reject) => {
        const transaction = this.db.transaction([storeName], 'readwrite');
        const store = transaction.objectStore(storeName);
        
        const request = store.put(data);
        request.onsuccess = () => {
          resolve(request.result);
        };
        request.onerror = (event) => {
          reject(event.target.error);
        };
      });
    }
    // 获取数据的专用方法
    async get(storeName, id) {
      if (!this.db) {
        throw new Error('数据库未连接');
      }
      return new Promise((resolve, reject) => {
        const transaction = this.db.transaction([storeName], 'readonly');
        const store = transaction.objectStore(storeName);
        const request = store.get(id);
        request.onsuccess = () => {
          resolve(request.result);
        };
        request.onerror = (event) => {
          reject(event.target.error);
        };
      });
    }
    async getAll(storeName) {
      if (!this.db) {
        throw new Error('数据库未连接');
      }
      return new Promise((resolve, reject) => {
        const transaction = this.db.transaction([storeName], 'readonly');
        const store = transaction.objectStore(storeName);
        const request = store.getAll();
        request.onsuccess = () => {
          resolve(request.result);
        };
        request.onerror = (event) => {
          reject(event.target.error);
        };
      });
    }
    // 删除数据的专用方法
    async delete(storeName, id) {
      if (!this.db) {
        throw new Error('数据库未连接');
      }
      return new Promise((resolve, reject) => {
        const transaction = this.db.transaction([storeName], 'readwrite');
        const store = transaction.objectStore(storeName);
        const request = store.delete(id);
        request.onsuccess = () => {
          resolve(request.result);
        };
        request.onerror = (event) => {
          reject(event.target.error);
        };
      });
    }
  }
  
  export default DB;

如果应用在页面中，例如vue3.0，可以在这里这样调用

import DB from '../utils/db.js'
/**
页面中的其他逻辑
*/
let indexDB = null
onMounted(async () => {
  indexDB = new DB()
  await indexDB.open(dbName, dbVersion, '测试数据库')
  await props.methods()
  await addTeacher()
  const allUsers = await indexDB.getAll('users')
  console.log(allUsers)
  getUser()
})
const addTeacher = async() => {
    // 添加数据
    const recordId = await indexDB.add('teachers', {
      name: '张三',
      age: 30,
      subject: '数学',
      id: 1001
    })
}
const getUser = async() => {
  // 获取数据
  const user = await indexDB.get('users', 1000)
  console.log(user)
}