indexDB的基本使用

第一步：准备环境

需要准备一个服务器容器打开页面，路径地址要是有ip地址或者localhost加端口好的格式

VSCode推荐使用Live Serve进行调试。

第二步：开启数据库

    let dbname='first-db'//数据库名
    let storeName='hellow'//集合名
    let  version=1  //数据库版本
    let db //数据库对象


    let request=window.indexedDB.open(dbname,version)
    request.onerror=function(e){
    console.log(e.target.errorCode);
    }
    //打开数据库成功
    request.onsuccess = function(event) {
    console.log("打开数据库成功",event)
    db = event.target.result
    }

    request.onupgradeneeded = function(event) {
    // 数据库创建或升级的时候会触发
    console.log('onupgradeneeded')
    db = event.target.result // 数据库对象
    let objectStore
    if (!db.objectStoreNames.contains(storeName)) {
      objectStore = db.createObjectStore(storeName, { keyPath: 'id' }) // 创建表
      // objectStore.createIndex('name', 'name', { unique: true }) // 创建索引 可以让你搜索任意字段
    }
  }

第三步：添加数据

// 添加数据
  function 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)
    }
  }
 
  // 由于打开indexDB是异步的加个定时器避免 db对象还没获取到值导致 报错
  setTimeout(() => {
    addData(db, storeName, {
      id: new Date().getTime(), // 必须且值唯一
      name: '张三',
      age: 20,
      desc: 'DBdata'
    })
  }, 1000)

运行打开网页控制台可以看到数据

基本语法

添加，修改，删除数据都是相同的步骤，创建事务，获取仓库，进行操作

  //根据id查询数据
  function getDatabyid(db,storeName,key){
    let trans=db.transaction([storeName], 'readwrite')
    let objectStore=trans.objectStore(storeName)
    let request=objectStore.get(key)

    request.onsuccess = function(event) {
      console.log('成功')
      console.log(request);
    }
 
    request.onerror = function(event) {
      console.log('失败')
    }
  }

根据游标遍历数据：

在获取仓库后

 var cursor = objectStore.openCursor();

    cursor.onsuccess = function(e) {
        var res = e.target.result;                
        if(res) {
                console.log("Key", res.key);
                console.dir("Data", res.value);
                res.continue();   
        } 
    }

continue方法将光标移到下一个数据对象，如果当前数据对象已经是最后一个数据了，则光标指向null。

通过索引获取数据：

在获取仓库后：

let request=objectStore.index(index).get('张三')//根据索引查询数据，getAll()为获取全部
    request.onsuccess = function(event) {
      console.log('成功')
      console.log(request.result);
    }
 
    request.onerror = function(event) {
      console.log('失败')
    }