返回

CC_DB：探索IndexedDB的开发之旅

前端

记一次封装indexedDB的实践之CC_DB---七日打卡

IndexedDB作为浏览器提供的本地数据库，以创建和操作网页脚本为核心，能够储存大量数据，提供查找接口，还能建立索引。尽管IndexedDB不属于关系型数据库，不支持SQL查询语句，但它更接近于NoSQL数据库。作为个人作品，CC_DB将带领我们深入IndexedDB的实现和应用。本系列以七日打卡的方式，深入理解IndexedDB。

第一天：认识IndexedDB

以一个简单的例子开始。首先，引入indexedDB的库，创建一个数据库，并开启事务，存储数据，最后关闭数据库。

<!DOCTYPE html>
<html>
<body>

<script>
// 引入indexedDB的库
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

// 打开数据库
var request = indexedDB.open("CC_DB", 1);

// 创建数据库，版本号为1
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // 创建表
  var objectStore = db.createObjectStore("customers", { keyPath: "id" });

  // 创建索引
  objectStore.createIndex("name", "name", { unique: false });
};

// 打开数据库成功后，操作数据库
request.onsuccess = function(event) {
  var db = event.target.result;

  // 开启事务
  var transaction = db.transaction(["customers"], "readwrite");

  // 获取表
  var objectStore = transaction.objectStore("customers");

  // 存储数据
  objectStore.add({ id: 1, name: "John Doe" });

  // 关闭事务
  transaction.oncomplete = function() {
    db.close();
  };
};

// 打开数据库失败时，提示错误信息
request.onerror = function(event) {
  console.error("IndexedDB error: ", event.target.errorCode);
};

</script>

</body>
</html>

在这个脚本中，首先引用indexedDB的库，然后创建一个名为"CC_DB"的数据库，版本号为1。接着在数据库升级时，创建一个名为"customers"的表，并创建一个名为"name"的索引。当数据库打开成功后，开启一个事务，获取表，存储数据，最后关闭事务。

第二天：索引的作用

索引在数据库中非常重要，它可以帮助我们快速地查找数据。在IndexedDB中，索引可以按照指定的属性对数据进行排序，提高查询效率。

<!DOCTYPE html>
<html>
<body>

<script>
// 引入indexedDB的库
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

// 打开数据库
var request = indexedDB.open("CC_DB", 1);

// 创建数据库，版本号为1
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // 创建表
  var objectStore = db.createObjectStore("customers", { keyPath: "id" });

  // 创建索引
  objectStore.createIndex("name", "name", { unique: false });
};

// 打开数据库成功后，操作数据库
request.onsuccess = function(event) {
  var db = event.target.result;

  // 开启事务
  var transaction = db.transaction(["customers"], "readwrite");

  // 获取表
  var objectStore = transaction.objectStore("customers");

  // 存储数据
  objectStore.add({ id: 1, name: "John Doe" });
  objectStore.add({ id: 2, name: "Jane Smith" });
  objectStore.add({ id: 3, name: "Michael Jones" });

  // 关闭事务
  transaction.oncomplete = function() {
    db.close();
  };
};

// 打开数据库失败时，提示错误信息
request.onerror = function(event) {
  console.error("IndexedDB error: ", event.target.errorCode);
};

</script>

</body>
</html>

在这个脚本中，我们创建了一个名为"name"的索引，以便按名称查找数据。存储数据时，分别添加了三个数据：John Doe、Jane Smith和Michael Jones。

第三天：游标的使用

游标是IndexedDB中非常有用的一个工具，它允许我们遍历表中的数据。我们可以使用游标来读取、更新或删除数据。

<!DOCTYPE html>
<html>
<body>

<script>
// 引入indexedDB的库
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

// 打开数据库
var request = indexedDB.open("CC_DB", 1);

// 创建数据库，版本号为1
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // 创建表
  var objectStore = db.createObjectStore("customers", { keyPath: "id" });

  // 创建索引
  objectStore.createIndex("name", "name", { unique: false });
};

// 打开数据库成功后，操作数据库
request.onsuccess = function(event) {
  var db = event.target.result;

  // 开启事务
  var transaction = db.transaction(["customers"], "readwrite");

  // 获取表
  var objectStore = transaction.objectStore("customers");

  // 使用游标遍历数据
  var cursorRequest = objectStore.openCursor();

  cursorRequest.onsuccess = function(event) {
    var cursor = event.target.result;

    if (cursor) {
      // 读取数据
      var data = cursor.value;

      // 更新数据
      // cursor.update({ id: data.id, name: "New Name" });

      // 删除数据
      // cursor.delete();

      // 继续遍历
      cursor.continue();
    } else {
      // 遍历结束
    }
  };

  // 关闭事务
  transaction.oncomplete = function() {
    db.close();
  };
};

// 打开数据库失败时，提示错误信息
request.onerror = function(event) {
  console.error("IndexedDB error: ", event.target.errorCode);
};

</script>

</body>
</html>

在这个脚本中，我们使用游标遍历了"customers"表中的数据。遍历时，我们可以读取、更新或删除数据。

第四天：事件监听

IndexedDB支持事件监听，我们可以监听数据库的各种事件，如数据库打开、关闭、升级、事务开始、提交和回滚等。

<!DOCTYPE html>
<html>
<body>

<script>
// 引入indexedDB的库
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

// 打开数据库
var request = indexedDB.open("CC_DB", 1);

// 创建数据库，版本号为1
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // 创建表
  var objectStore = db.createObjectStore("customers", { keyPath: "id" });

  // 创建索引
  objectStore.createIndex("name", "name", { unique: false });
};

// 打开数据库成功后，操作数据库
request.onsuccess = function(event) {
  var db = event.target.result;

  // 添加事件监听器
  db.addEventListener("close", function() {
    console.log("数据库已关闭");
  });

  db.addEventListener("error", function(event) {
    console.error("数据库发生错误：", event.target.errorCode);
  });

  // 开启事务
  var transaction = db.transaction(["customers"], "readwrite");

  // 获取表
  var objectStore = transaction.objectStore("customers");

  // 存储数据
  objectStore.add({ id: 1, name: "John Doe" });

  // 关闭事务
  transaction.oncomplete = function() {
    db.close();
  };
};

// 打开数据库失败时