indexDB usage records

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>IndexDB</title>
</head>
<body>
</body>
<script>
  let db = {};
  // 打开数据库
  const openDB = (dbName, version, storeName) => {
    let indexedDB = window.indexedDB;
    
    // 获取indexDB对象
    const request = indexedDB.open(dbName, version)

    // 数据库打开成功
    request.onsuccess = function(event) {
      // 数据库对象
      db = event.target.result;
      console.log('数据库打开成功');
    }
    
    // 数据库打开失败
    request.onerror = function(event) {
      console.log('数据库打开报错')
    }
    
    // 无数据库，进行数据库创建
    request.onupgradeneeded = function(event) {
      // 数据库创建或升级的时候会触发
      console.log('数据库创建成功');
      db = event.target.result;
      // 创建数据表
      let objectStore
      if (!db.objectStoreNames.contains(storeName)) {
        objectStore = db.createObjectStore(storeName, { keyPath: 'id', autoIncrement: true }) // 创建表
        objectStore.createIndex('idIndex', 'name', { unique: false }) // 创建索引 可以让你搜索任意字段
      }
    }
  }
 
  // 添加数据
  const addData = (db, storeName, data) => {
    let request = db.transaction([storeName], 'readwrite') // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
      .objectStore(storeName) // 仓库对象
      .add(data)
  
    request.onsuccess = function(event) {
      console.log('数据写入成功')
    }
  
    request.onerror = function(event) {
      console.log('数据写入失败')
      throw new Error(event.target.error)
    }
  }
 
  // 根据id获取数据
  const getDataByKey = (db, storeName, key) => {
    return new Promise((resolve, reject) => {
      let transaction = db.transaction([storeName]) // 事务
      let objectStore = transaction.objectStore(storeName) // 仓库对象
      let request = objectStore.get(key)
 
      request.onerror = function(event) {
        console.log('事务失败')
        reject(event)
      }
 
      request.onsuccess = function(event) {
        console.log('主键查询结果: ', request.result)
        resolve(request.result);
      }
    })
  }
 
  //按索引查询
  const findByIndex = (db, storeName, key) => {
    return new Promise((resolve, reject) => {
      const transaction = db.transaction([storeName], "readonly");
      const store = transaction.objectStore(storeName);
      const index = store.index("idIndex");
      const request = index.get(key);
      request.onerror = function(event) {
        console.log('事务失败')
        reject(event)
      }

      request.onsuccess = function() {
          const data = request.result;
          resolve(data);
      }
    })
  }

  // 根据id修改数
  const updateData = (db, storeName, data) => {
    let request = db.transaction([storeName], 'readwrite') // 事务对象
      .objectStore(storeName) // 仓库对象
      .put(data)
 
    request.onsuccess = function() {
      console.log('数据更新成功')
    }
 
    request.onerror = function() {
      console.log('数据更新失败')
    }
  }
 
  // 根据id删除数据
  const deleteData = (db, storeName, id) => {
    let request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(id)
 
    request.onsuccess = function() {
      console.log('数据删除成功')
    }
 
    request.onerror = function() {
      console.log('数据删除失败')
    }
  }
 
  // 打开数据库
  let dbName = 'dbName', version = 2, storeName = 'biaoName'
  openDB(dbName, version, storeName);
  
  // 由于打开indexDB是异步的加个定时器避免 db对象还没获取到值导致 报错
  setTimeout(() => {
    console.log(db)
    addData(db, storeName, {
      id: (new Date).getTime(), // 必须且值唯一
      name: '张三',
      age: 18,
      desc: 'helloWord'
    })

    getDataByKey(db, storeName, 1).then(res => {
      console.log(res)
    })
 
 
    updateData(db, storeName, {id: 1663048566051, desc: '修改的内容', indexDB: '11111'})

    // deleteData(db, storeName, 2)

    findByIndex(db, storeName, '张三').then(res => {
      console.log(res)
    })
 
  }, 1000)
 
</script>
</html>
indexDB usage records

Guess you like
