IndexedDB 教程：浏览器数据库的探索与实践

IndexedDB 是一种在浏览器中存储大量结构化数据的存储机制，无需依赖第三方服务器。它提供了一种在客户端存储大量结构化数据的方式，支持索引和查询，并且能够处理事务。

一、IndexedDB 的基础概念

1. 数据库：在 IndexedDB 中，一个应用程序可以拥有多个数据库，每个数据库是一个独立的存储空间。每个数据库都有一个名字和版本号。
2. 对象存储空间：每个数据库中包含一个或多个对象存储空间，用于存储数据记录。每个对象存储空间都有一个名字。
3. 键值对：数据以键值对的形式存储在对象存储空间中。键是唯一的标识符，用于检索数据。值可以是任意类型的数据，如字符串、数字、对象等。
4. 索引：索引是一种数据结构，用于快速检索数据。在 IndexedDB 中，可以为对象存储空间中的数据记录创建索引，以便通过键以外的属性来检索数据。
5. 事务：事务是一系列操作数据库的逻辑单元，要么全部成功执行，要么全部失败回滚。在 IndexedDB 中，事务提供了对数据库的原子性操作。

二、IndexedDB 的使用方法

1. 打开数据库：使用 IndexedDB 的第一步是打开数据库，使用 indexedDB.open() 方法。var request = window.indexedDB.open(databaseName, version); 这个方法接受两个参数，第一个参数是字符串，表示数据库的名字。如果指定的数据库不存在，就会新建数据库。第二个参数是整数，表示数据库的版本。如果省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为 1。indexedDB.open() 方法返回一个 IDBRequest 对象。这个对象通过三种事件 error、success、upgradeneeded，处理打开数据库的操作结果。
2. 创建索引：在对象存储空间中创建索引，可以使用 ObjectStore.createIndex() 方法。这个方法接受三个参数：索引的名称、键路径和可选的参数对象。例如：objectStore.createIndex('name', 'name', { unique: false }); 这将在对象存储空间中创建一个名为 ‘name’ 的索引，用于快速检索具有特定名称的数据记录。
3. 存储数据：使用 ObjectStore.put() 方法将数据记录存储到对象存储空间中。这个方法接受两个参数：要存储的数据和可选的参数对象。例如：objectStore.put({ name: 'Alice', age: 25 }, 1); 这将在对象存储空间中创建一个新的数据记录，键为 1，属性为 name 和 age。
4. 查询数据：使用 ObjectStore.get() 方法根据键检索数据记录。这个方法接受一个参数：要检索的键的值。例如：objectStore.get(1); 这将返回键为 1 的数据记录。如果想要根据索引进行查询，可以使用 ObjectStore.index() 方法获取索引对象，然后使用 Index.get() 方法进行查询。例如：objectStore.index('name').get('Alice'); 这将返回名为 Alice 的所有数据记录。
5. 更新数据：使用 ObjectStore.put() 方法更新数据记录。这个方法会替换旧的数据记录，并自动处理键冲突的问题。例如：objectStore.put({ name: 'Alice', age: 26 }, 1); 这将更新键为 1 的数据记录的属性 age 为 26。如果要更新索引的值，可以使用 Index.set() 方法。例如：objectStore.index('name').set('Alice', { age: 27 }); 这将更新名为 Alice 的所有数据记录的属性 age 为 27。
6. 删除数据：使用 ObjectStore.delete() 方法根据键删除数据记录。这个方法接受一个参数：要删除的键的值。例如：objectStore.delete(1); 这将删除键为 1 的数据记录。如果要删除所有符合条件的记录，可以使用 ObjectStore.clear() 方法或 Index.delete() 方法。例如：objectStore.clear(); 或 objectStore.index('name').delete('Alice'); 这将删除所有符合条件的数据记录。
7. 关闭数据库：当应用程序完成对数据库的操作后，应该关闭数据库以释放资源。这可以通过调用 IDBDatabase.close() 方法实现。例如：