浏览器内置NoSQL数据库IndexedDB

IndexedDB - 浏览器内容数据库

indexedDB 是一种浏览器内置的NoSQL数据库，它使用键值对存储数据，用于在客户端存储大量结构化数据。它支持离线应用程序和高效的数据检索，可以在 Web 应用程序中替代传统的 cookie 和 localStorage。
IndexDB是一种在浏览器中内置的NoSQL数据库，用于在客户端存储和检索数据。它提供了一种持久存储数据的方式，可以在离线状态下使用。

使用 indexedDB 需要以下步骤：

1. 打开数据库：使用 indexedDB.open() 方法打开一个数据库，如果数据库不存在，则会创建一个新的数据库。

2. 创建对象存储空间：使用 createObjectStore() 方法创建一个对象存储空间，用于存储数据。可以为每个对象存储空间设置一个名称和一个键路径，键路径用于指定对象存储空间中的每个对象的唯一标识符。

3. 存储数据：使用 add() 或 put() 方法将数据存储到对象存储空间中。add() 方法用于向对象存储空间中添加新的数据，如果该数据已经存在，则会抛出错误。put() 方法用于向对象存储空间中添加或更新数据。

4. 检索数据：使用 get() 或 getAll() 方法从对象存储空间中检索数据。get() 方法用于检索指定键路径的数据，getAll() 方法用于检索对象存储空间中的所有数据。

5. 删除数据：使用 delete() 方法从对象存储空间中删除指定键路径的数据。

6. 关闭数据库：使用 close() 方法关闭数据库连接。

需要注意的是，indexedDB 使用异步 API，需要使用回调函数或 Promise 处理返回结果。此外，indexedDB 只能在支持该 API 的浏览器中使用，需要检查浏览器是否支持 indexedDB API。

indexedDB 和 localStorage 的区别

indexedDB 和 localStorage 都是浏览器提供的客户端存储方案，它们之间的区别主要有以下几点：

1. 数据存储方式：localStorage 存储的是字符串类型的数据，而 indexedDB 存储的是结构化数据。indexedDB 支持存储复杂的数据类型，例如对象、数组等，而 localStorage 只能存储字符串类型的数据。

2. 存储容量：localStorage 的存储容量通常为 5MB 左右，而 indexedDB 的存储容量通常为几百 MB 或几 GB。indexedDB 可以存储大量的数据，适用于需要存储大量结构化数据的应用程序。

3. 数据检索方式：indexedDB 支持基于索引的高效数据检索，可以通过索引快速查询数据。而 localStorage 只能遍历整个数据集合进行数据检索，效率较低。

4. 事务支持：indexedDB 支持事务操作，可以确保数据的一致性和完整性。而 localStorage 不支持事务操作，无法保证数据的一致性和完整性。

5. 浏览器支持：indexedDB API 在较新版本的浏览器中得到支持，而 localStorage API 在大多数浏览器中都得到支持。

综上所述，indexedDB 更适合存储大量结构化数据，并且支持高效的数据检索和事务操作；而 localStorage 更适合存储少量简单的字符串类型数据。

demo演示：

// 打开或创建一个名为"myDatabase"的数据库
const request = indexedDB.open('myDatabase', 1);

// 当数据库打开成功时触发
request.onsuccess = function(event) {
  const db = event.target.result;

  // 创建一个名为"myObjectStore"的对象存储空间
  const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });

  // 添加一些数据到对象存储空间
  const data = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
  ];
  // 通过db.transaction('myObjectStore', 'readwrite')创建一个名为myObjectStore的对象存储空间的读写事务。这里的'readwrite'表示事务的模式，允许读取和写入数据。
  const transaction = db.transaction('myObjectStore', 'readwrite');
  // 通过transaction.objectStore('myObjectStore')获取到名为myObjectStore的对象存储空间的引用，以便后续对该对象存储空间进行操作，如添加、更新或删除数据。
  const store = transaction.objectStore('myObjectStore');

  data.forEach(function(item) {
    store.add(item);
  });

  // 数据添加完成后，关闭数据库连接
  transaction.oncomplete = function() {
    db.close();
  };
};

// 当数据库打开失败时触发
request.onerror = function(event) {
  console.log('打开数据库失败');
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

keyPath是IndexDB中用于定义对象存储空间中每个对象的唯一键的属性。这个键可以是任何一个对象中的属性，例如ID、名称或日期等。在创建对象存储空间时，可以通过指定keyPath属性来定义唯一键。这样，在添加、更新或删除数据时，可以使用这个唯一键来引用和操作对象。