indexeddb全方位详解

发布时间：2023-05-20

indexed是indexeddb的缩写，是一款用来在浏览器端实现本地数据库操作的JavaScript API。它采用了对象仓库（Object Store）存储数据，通过key-value的方式进行数据的增删改查操作，并且与Web Worker结合可以高效的处理大量数据操作。

一、indexeddb介绍

1、indexeddb的概念

IndexedDB是HTML5新提供的浏览器端存储数据的一种方案，推出的初衷是为了支持在Web端应用中离线存储方案的开发。IndexedDB支持在客户端本地离线存储数据，提供下一级缓存，并不依赖于网络连接。

2、indexeddb的特点

IndexedDB擅长处理大量的客户端数据，定义了一个对象仓库，其中包含了可以使用键值对存储的对象。IndexedDB也支持存储其他类型的数据，如BLOB和ArrayBuffer。

3、indexeddb的优势

相对于localStorage和sessionStorage，IndexedDB比较优势比较明显：

  • 支持存储非字符串类型数据：localStorage和sessionStorage只支持存储字符串类型数据，而IndexedDB可以存储各种类型的数据，通过Blob对象可以存储二进制数据，通过ArrayBuffer对象可以存储大文件。
  • 支持创建多个对象仓库：每个对象库相当于一张表，我们可以使用不同的数据结构来存储不同类型的数据。
  • 支持异步操作：IndexedDB以异步的方式读取和存储数据，可以在读取和写入大段数据时提高性能。
  • 支持事务处理：IndexedDB支持通过事务处理选项来确保数据的完整性，以及避免在并发操作时对数据产生冲突。 因此，IndexedDB适用于那些需要大量读写本地数据资源的Web应用，比如：邮件客户端、CRM系统、日记、聊天等。

二、indexeddb入门

1、创建indexeddb数据库

let db;
let request = window.indexedDB.open("myDatabase", 1);
request.onerror = function(event) {
    console.log("数据库打开报错");
};
request.onsuccess = function(event) {
    db = request.result;
    console.log("数据库打开成功");
};
request.onupgradeneeded = function(event) {
    db = event.target.result
    var objectStore = db.createObjectStore("customers", { keyPath: "id" });
    objectStore.createIndex("name", "name", { unique: false });
    objectStore.createIndex("email", "email", { unique: true });
};

打开和创建数据库的过程是异步执行的。开发者需要在open方法的onsuccess函数处理异步回调函数时获取db对象。

2、向indexeddb数据库中存储数据

let tx = db.transaction(["customers"], "readwrite");
let objectStore = tx.objectStore("customers");
let request = objectStore.add({ id: 1, name: "John", email: "john@doe.com" });
request.onerror = function(event) {
    console.log("添加数据失败");
};
request.onsuccess = function(event) {
    console.log("添加数据成功");
};
tx.oncomplete = function() {
    console.log("事务完成");
};

在indexeddb中添加和修改数据的逻辑都是一样的。首先需要开启一个事务，然后新建或者获取已经创建好的object store，最后再向object store中添加数据。

三、indexed注解

1、indexeddb的概念

indexed属性的特殊含义是将指定的字段进行索引，建立索引后可以通过索引快速进行数据查找，通过索引的方式可以提高数据查询的效率。

let tx = db.transaction(["customers"], "readonly");
let objectStore = tx.objectStore("customers");
let index = objectStore.index("name");
let request = index.get("John");
request.onerror = function(event) {
    console.log("获取数据失败");
};
request.onsuccess = function(event) {
    console.log("获取John的信息：" + request.result.email);
};

在indexeddb中通过index(索引)对象可以进行类似sql中where关键字的匹配操作。

2、indexeddb可以删掉吗

可以使用indexedDB.deleteDatabase()方法删除indexedDB数据库，一旦被删除就无法恢复。

let req = indexedDB.deleteDatabase('mycoolnewdatabase');
req.onsuccess = function () { console.log("Delete successfully");};
req.onerror = function () { console.log("Delete unsuccessful");};

四、indexedDB使用

1、使用事务

需要使用IndexedDB执行数据读写操作时，建议将操作写成一个事务，以保证数据的完整性和一致性。通常一个事务中会包含多个操作，事务的目的是确保相关操作的原子性，也就是说：事务中的一系列操作要么全部成功，要么全部失败。

let tx = db.transaction(["customers"], "readwrite");
let objectStore = tx.objectStore("customers");
objectStore.put({ id: 1, name: "John", email: "john@doe.com" });
objectStore.put({ id: 2, name: "Bob", email: "bob@doe.com" });
objectStore.put({ id: 3, name: "Tom", email: "tom@doe.com" });
tx.oncomplete = function(event) {
    console.log("事务完成");
};

2、使用游标

使用游标可以通过一组条件搜索已存储的记录，并按照指定的顺序返回这些记录。cursor方法将返回包含已索引数据库对象中一个表格中所有先前添加的对象；当你使用它时，你需要通过检查每个对象检查检索的数据是否与您的期望匹配，只有当它们匹配时才执行您的代码。

let tx = db.transaction(["customers"], "readonly");
let store = tx.objectStore("customers");
let index = store.index('name');
index.openCursor().onsuccess = function(event) {
    let cursor = event.target.result;
    if (cursor) {
        console.log(cursor.value.name);
        cursor.continue();
    }
};

五、indexed by

1、indexed by的概念

indexed by是基于indexeddb进行一些restapi的封装，实现简单易用、高效便捷的本地存储方案。

2、indexed by的使用

const client = new IndexedBy({
    dbName: 'database_name',
    objectStores: [{
        name: 'object_store_name',
        keyPath: 'id'
    }]
});
client.init().then(() => {
    client.actions.Insert('object_store_name', {
        id: 1,
        name: '可乐',
        number: 10
    });
});

使用indexedby可以大大简化indexeddb的API使用难度。

六、indexed模式

1、indexed模式的概念

indexed模式是让indexeddb在有必要时自动升级数据库模型，让存储的数据更有条理。例如，当现有的“顾客”存储库缺少邮政编码一列时，indexedDB将自动更新数据库。

let db;
let request = indexedDB.open("myDatabase", 2);
request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("customers", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
  objectStore.createIndex("email", "email", { unique: true });
  objectStore.createIndex("zipcode", "zipcode", { unique: false });
};
request.onsuccess = function(event) {
  db = event.target.result;
};

七、indexed by什么意思

indexed by什么意思

indexedby是一种全新的IndexedDB库，为IndexedDB提供了更面向对象的访问方式。它通过简单的链式调用和类似mongoose的模式来增强IndexedDB。 由此可见，"indexed by"就是把IndexedDB封装成了一个库，面向对象化和链式调用是它的特色。

推荐文章