初识IndexedDB【增，查】中

一，前言

其实IndexedDB的应用比较广泛。就以某视频网站为例吧。

可以看到，IndexedDB数据库的使用是非常广泛的。

二，IndexedDB的增

我们在html文件里加入script标签

  let db;
  openDB("class",1).then((db) => {
    db=db;
    console.log(db);
    // 插入数据
    let data = {
      uuid:Math.round(Math.random()*100),
      neme:"上进小菜猪",
      class:"计算机",
      number:"2067111119"
    }
    addData(db,'users', data);

我们再增加一条、

因为我们设置的主键不能重复，所以刷新，不会增加，我们现在把主键改为随机数：

uuid:Math.round(Math.random()*100),

刷新若干次：

观察，主键变了，后面的值不变。

三，IndexedDB的查

IndexedDB的查的方式比较多样化。

//通过主键查询数据
  getDataByKey(db,'users',9);

  //通过游标查询数据
  cursorGetData(db,'users');
  //通过索引查询数据
  getDataByIndex(db,'users','class',"计算机");
  //通过索引和游标查询记录
  cursorGetDataByIndex(db,'users','class',"计算机");
  //通过索引和游标分页查询记录
  cursorGetDataByIndexAndPage(
  db,
  'users',
  'name',
  '张三',
  1,
  10
  );

我们直接来看效果图吧。

贴一下JS方法

//插入数据

function addData(db, storeName, data) {
  var request = db
    .transaction([storeName], "readwrite") // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
    .objectStore(storeName) // 仓库对象
    .add(data);

  request.onsuccess = function (event) {
    console.log("数据写入成功");
  };

  request.onerror = function (event) {
    console.log("数据写入失败");
  };
}



//通过主键读取数据
function getDataByKey(db, storeName, key) {
  return new Promise((resolve, reject) => {
    var transaction = db.transaction([storeName]); // 事务
    var objectStore = transaction.objectStore(storeName); // 仓库对象
    var request = objectStore.get(key); // 通过主键获取数据

    request.onerror = function (event) {
      console.log("事务失败");
    };

    request.onsuccess = function (event) {
      console.log("主键查询结果: ", request.result);
      resolve(request.result);
    };
  });
}



//通过游标读取数据
function cursorGetData(db, storeName) {
  let list = [];
  var store = db
    .transaction(storeName, "readwrite") // 事务
    .objectStore(storeName); // 仓库对象
  var request = store.openCursor(); // 指针对象
  // 游标开启成功，逐行读数据
  request.onsuccess = function (e) {
    var cursor = e.target.result;
    if (cursor) {
      // 必须要检查
      list.push(cursor.value);
      cursor.continue(); // 遍历了存储对象中的所有内容
    } else {
      console.log("游标读取的数据：", list);
    }
  };
}



//通过索引读取数据
function getDataByIndex(db, storeName, indexName, indexValue) {
  var store = db.transaction(storeName, "readwrite").objectStore(storeName);
  var request = store.index(indexName).get(indexValue);
  request.onerror = function () {
    console.log("事务失败");
  };
  request.onsuccess = function (e) {
    var result = e.target.result;
    console.log("索引查询结果：", result);
  };
}


// 通过索引和游标查询记录
function cursorGetDataByIndex(db, storeName, indexName, indexValue) {
  let list = [];
  var store = db.transaction(storeName, "readwrite").objectStore(storeName); // 仓库对象
  var request = store
    .index(indexName) // 索引对象
    .openCursor(IDBKeyRange.only(indexValue)); // 指针对象
  request.onsuccess = function (e) {
    var cursor = e.target.result;
    if (cursor) {
      // 必须要检查
      list.push(cursor.value);
      cursor.continue(); // 遍历了存储对象中的所有内容
    } else {
      console.log("游标索引查询结果：", list);
    }
  };
  request.onerror = function (e) {};
}


//通过索引和游标分页查询记录
function cursorGetDataByIndexAndPage(
  db,
  storeName,
  indexName,
  indexValue,
  page,
  pageSize
) {
  let list = [];
  let counter = 0; // 计数器
  let advanced = true; // 是否跳过多少条查询
  var store = db.transaction(storeName, "readwrite").objectStore(storeName); // 仓库对象
  var request = store
    .index(indexName) // 索引对象
    .openCursor(IDBKeyRange.only(indexValue)); // 指针对象
  request.onsuccess = function (e) {
    var cursor = e.target.result;
    if (page > 1 && advanced) {
      advanced = false;
      cursor.advance((page - 1) * pageSize); // 跳过多少条
      return;
    }
    if (cursor) {
      // 必须要检查
      list.push(cursor.value);
      counter++;
      if (counter < pageSize) {
        cursor.continue(); // 遍历了存储对象中的所有内容
      } else {
        cursor = null;
        console.log("分页查询结果", list);
      }
    } else {
      console.log("分页查询结果", list);
    }
  };
  request.onerror = function (e) {};
}