隆重介绍:IndexedDB - 基于浏览器的数据库系统,让你的Web应用程序运行得更快更顺畅!

1,092 阅读7分钟

Hello,小伙伴们!今天,我们要聊的是一种非常神奇而且实用的技术——IndexedDB。你或许听说过它,但是对它的理解可能并不深入。那么首先,让我们来谈谈什么是IndexedDB吧。

🔍 什么是indexdb

IndexedDB是一种在客户端浏览器上运行的数据库,它允许网页应用程序在浏览器中存储和检索数据。和传统的关系型数据库不同,IndexedDB采用键值对存储方法,不仅可以存储基本的字符串、数字和布尔值等数据类型,还可以存储更加复杂和结构化的数据,例如JavaScript对象和Blob等,使用起来非常得心应手。

🌈 indexdb的使用场景

IndexedDB是一种强大的存储技术,应用广泛且实用。下面,让我们来看看IndexedDB都有哪些使用场景。

首先,它特别适合用于在线笔记应用程序。严重依赖互联网的在线笔记应用需要在没有网络的情况下也能够运行,IndexedDB就提供了这种能力。离线缓存技术能够让笔记应用快速载入,那么就算你处在荒无人烟的地方,也能够畅快的写笔记了。

另一方面,IndexedDB也非常适合用于离线Web应用程序,它允许网页应用程序在浏览器中存储和检索数据,这意味着你可以在没有网络连接的情况下运行你的Web应用程序。因为IndexedDB可以在客户端存储大量数据,所以一旦网络恢复,用户可以本地数据同步到云端数据库,再从云端同步到其他设备。

此外,IndexedDB还可以被用于电子商务网站,特别是需要在本地存储购物车和订单历史记录的情况下。IndexedDB可以高效地存储大量数据和能够更好地支持一些查询和过滤方法,提高用户的购物体验。

最后,IndexedDB还可以被应用于数据可视化工具,这意味着即使用户休眠或者浏览器标签被关闭,你也能够存储用户正在处理的可视化数据,从而加速数据查询和处理,让你的数据的显示更加丝滑顺畅。

好了,我们刚刚了解了IndexedDB的一些应用场景,相信你现在已经开始领会到IndexedDB的优势和实用性了吧!

📚 如何使用indexdb

好的,现在我们已经了解了IndexedDB的使用场景,那么接下来就是最重要的一步,学习怎样使用它。下面,我会详细介绍如何通过JavaScript API操作IndexedDB数据库。

其中,包含以下内容:

1.创建indexdb数据库

在使用IndexedDB之前,首先要创建一个database,在这个过程中,你需要指定database名称和版本:

// 打开数据库,如果不存在则创建它
const dbName = "myDatabase"
const dbVersion = 1;
const request = indexedDB.open(dbName, dbVersion);

其中,open()方法会返回一个IDBRequest对象,它用于跟踪打开或创建数据库的进度。在上面的示例中,我们打开了一个名为“myDatabase”的数据库,并指定了版本号为1。

  1. 创建对象存储空间

创建完数据库之后,你需要再创建一个对象存储空间,用来存储具体的数据。对于每一个存储空间,你需要指定一个唯一的名称、一个主键和可能的索引:

request.onupgradeneeded = event => {
    const db = event.target.result;
    const store = db.createObjectStore("myStore", {
        keyPath: "id"
    });
    store.createIndex("name", "name", {unique: false});
}

在上面的例子中,我们使用createObjectStore()方法创建了一个名为“myStore”的对象存储空间,并指定了“id”作为主键。我们还为存储空间添加了一个名为“name”的索引,从而可以方便地通过名称进行查找。

  1. 进行数据的增删查改操作

当你创建好存储空间后,你可以开始进行数据的增删查改操作了。通过transaction(事务)object store(对象存储空间),你可以添加、删除、更新数据,并检索数据。

// 添加数据
const transaction = db.transaction(["myStore"], "readwrite");
const objectStore = transaction.objectStore("myStore");
objectStore.add({id: 1, name: "Onlyy"});
// 删除数据
const transaction = db.transaction(["myStore"], "readwrite");
const objectStore = transaction.objectStore("myStore");
objectStore.delete(1);
// 更新数据
const transaction = db.transaction(["myStore"], "readwrite");
const objectStore = transaction.objectStore("myStore");
const request2 = objectStore.get(1);
request2.onsuccess = () => {
    const data = request2.result;
    data.name = "Updated name";
    const request3 = objectStore.put(data);
    request3.onsuccess = () => {
        console.log("Data updated");
    };
};
// 检索数据
const transaction = db.transaction(["myStore"]);
const objectStore = transaction.objectStore("myStore");
const request4 = objectStore.get(1);
request4.onsuccess = () => {
    const data = request4.result;
    console.log(data)
};

在上面的例子中,我们创建了一个用于添加、删除、更新和检索数据的transaction和object store。其中,add()方法用于添加数据,delete()方法用于删除数据,put()方法用于更新数据,get()方法用于检索数据。嗯,相信这些操作大家都非常熟悉了吧?

  1. 删除库和存储空间

必要的时候,你还可以删除整个数据库或者存储空间:

// 删除对象存储空间
const transaction = db.transaction(["myStore"], "readwrite");
db.deleteObjectStore("myStore");
// 删除整个数据库
indexedDB.deleteDatabase("myDatabase");

OK,以上就是介绍使用IndexedDB的一些基本操作,相信通过实例化的代码,你已经明白了怎样使用IndexedDB,并能得心应手地增删查改和删除IndexedDB操作了吧!

💡 优化indexdb性能

随着数据量的增加,IndexedDB的性能可能会出现问题。所以,我们需要一些优化方法来提高IndexedDB的性能:

  1. 使用游标进行数据按键索引

当你需要按键索引进行数据检索时,使用游标(Cursor)可以有效提高检索效率。游标可以以索引顺序遍历存储空间中的数据。

const tx = db.transaction("myStore");
const store = tx.objectStore("myStore");
const index = store.index("name");
​
// 通过游标获取100个元素
const request = index.openCursor();
let count = 0;
request.onsuccess = function() {
  const cursor = request.result;
  if (cursor && count++ < 100) {
    console.log(cursor.value);
    cursor.continue();
  }
};
  1. 对数据进行批处理插入

向IndexedDB中插入大量数据时,可以考虑分批插入,每次只插入特定数量的数据。这种方式可以避免浏览器卡死导致页面不响应,提高存储效率。

const tx = db.transaction("myStore", "readwrite");
const store = tx.objectStore("myStore");
const data = [{id: 1, name: "Data1"}, {id: 2, name: "Data2"}, ...];
​
data.forEach(obj => store.add(obj));
  1. 使用IndexedDB的IDBTransaction对象的read-only属性

对于只读数据,可以使用IndexedDB的IDBTransaction对象的readOnly属性,这样可以避免意外的写入(意外写入可能会使事务提交失败)。

const tx = db.transaction("myStore", "readonly");
const store = tx.objectStore("myStore");
​
store.get(1).onsuccess = function(event) {
  console.log(event.target.result);
};
  1. 使用Web Worker线程

IndexedDB的操作会阻塞主线程,影响用户体验。可以尝试将indexedDB的操作放到WebWorker线程中,这样就不会阻塞主线程了。

const worker = new Worker("worker.js");
worker.postMessage({action: "doWork"});
  1. 数据分页

对于大量数据的查询,如果一次性查询所有数据,可能会导致浏览器卡死。这时我们可以把数据分成多个小批次查询,从而减轻查询压力。

const txn = db.transaction("myStore");
const store = txn.objectStore("myStore");
const request = store.openCursor();
const data = [];request.onsuccess = () => {
  const cursor = request.result;
  if (cursor) {
    data.push(cursor.value);
    if (data.length === 100) {
      console.log(data);
      data = [];
    }
    cursor.continue();
  }
};

以上就是IndexedDB性能优化的一些方法,当我们在面对一个大的存储数据时,可以采用以上的方案来提高存储和读取数据的效率。

📝 总结

IndexedDB是一种在客户端浏览器上运行的数据库,它允许网页应用程序在浏览器中存储和检索数据。与传统的关系型数据库不同,IndexedDB采用键值对存储方法,并且可以存储基本的字符串、数字和布尔值等数据类型,还可以存储更加复杂和结构化的数据,例如JavaScript对象和Blob等。它的主要特征包括:

  • 高效存储和检索大型数据集
  • 可以在离线环境下工作
  • 支持事务操作

IndexedDB的技术亮点包括:

  • 使用游标进行数据检索
  • 对数据进行批量插入
  • 使用Web Worker线程
  • 数据分页

IndexedDB的应用场景涵盖面广,可以用于在线笔记应用程序、电子商务网站、数据可视化工具等等。IndexedDB还有很多的优点和用处,比如存储效率高、易于控制、跨平台等。如果你对IndexedDB感兴趣的话,希望你能去深入学习,它可以帮助你构建更好的web应用程序。

文笔和精力有限,如有错误或遗漏,欢迎在评论区指正和补充!