IndexedDB

**IndexedDB介绍**

IndexedDB 是一种客户端存储机制，允许 Web 应用程序在浏览器中存储大量数据。它提供了一个高性能的键值对存储系统，使得开发者能够轻松地实现复杂的数据管理功能。

**IndexedDB 的特点**

1. **高性能**: IndexedDB 的读写操作速度比 localStorage 快很多。
2. **大容量**: IndexedDB 可以存储大量数据，理论上支持 TB 级别的数据容量。
3. **键值对**: IndexedDB 使用键值对来存储和检索数据。
4. **事务性**: IndexedDB 支持事务性操作，使得开发者能够确保数据的一致性。

**IndexedDB 的使用场景**

1. **缓存数据**: IndexedDB 可以用来缓存 Web 应用的数据，减少服务器请求的次数。
2. **本地存储**: IndexedDB 可以用来实现本地存储功能，比如保存用户的偏好设置。
3. **游戏数据**: IndexedDB 可以用来存储游戏的数据，如玩家信息、游戏进度等。

**IndexedDB 的 API**

IndexedDB 提供了以下几个主要的 API：

1. **IDBDatabase**: 表示一个 IndexedDB 数据库实例。
2. **IDBObjectStore**: 表示一个 IndexedDB 对象存储实例。
3. **IDBTransaction**: 表示一个 IndexedDB 事务实例。
4. **IDBCursor**: 表示一个 IndexedDB 光标实例。

**IndexedDB 的使用步骤**

1. **创建数据库**: 使用 `window.indexedDB` 或 `indexedDB.open()` 方法创建一个 IndexedDB 数据库实例。
2. **获取对象存储**: 使用 `IDBDatabase.createObjectStore()` 方法获取一个 IndexedDB 对象存储实例。
3. **添加数据**: 使用 `IDBObjectStore.add()` 方法添加数据到对象存储中。
4. **读取数据**: 使用 `IDBObjectStore.get()` 或 `IDBCursor` 的 `value` 属性读取数据。
5. **更新数据**: 使用 `IDBObjectStore.put()` 方法更新数据。
6. **删除数据**: 使用 `IDBObjectStore.delete()` 方法删除数据。

**示例代码**

javascript// 创建数据库const db = window.indexedDB.open('myDatabase',1);

db.onerror = event => {
 console.error('Error creating database:', event.target.error);
};

db.onupgradeneeded = event => {
 const db = event.target.result;
 // 获取对象存储 const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
 // 添加数据 const data1 = { id:1, name: 'John Doe' };
 const data2 = { id:2, name: 'Jane Doe' };
 objectStore.add(data1);
 objectStore.add(data2);
};

db.onsuccess = event => {
 console.log('Database created successfully:', db.result);
};

javascript//读取数据const transaction = db.transaction(['myObjectStore'], 'readonly');
const objectStore = transaction.objectStore('myObjectStore');

objectStore.get(1).onsuccess = event => {
 const data = event.target.result;
 console.log('Data read successfully:', data);
};

javascript// 更新数据const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');

objectStore.get(1).onsuccess = event => {
 const data = event.target.result;
 // 更新数据 data.name = 'John Doe Updated';
 objectStore.put(data);
};

transaction.oncomplete = event => {
 console.log('Data updated successfully:', data);
};