学习H5indexedDB 增删改查

**HTML5 IndexedDB 学习指南** IndexedDB 是 HTML5 中一种高级的本地存储机制，它为应用程序提供了在客户端浏览器中存储大量结构化数据的能力，支持高效搜索和索引。这个技术尤其适合需要离线存储或者需要处理大量数据的Web应用，如Web应用的缓存、数据库或复杂的数据分析。 **1. IndexedDB 的基本概念** - **Database（数据库）**: 存储数据的容器，每个数据库有自己的版本号。 - **Object Store（对象存储）**: 数据库中的数据按对象存储，类似传统数据库的表。 - **Index（索引）**: 提供快速访问对象存储中的数据，基于一个或多个属性创建。 - **Transaction（事务）**: 数据操作的安全边界，保证操作的原子性。 - **Cursor（游标）**: 遍历对象存储或索引中的记录。 **2. 使用 IndexedDB 的步骤** 1. **打开数据库**：通过 `window.indexedDB.open()` 方法创建或打开一个数据库，提供数据库名和版本号。 2. **创建或修改对象存储**：在`onupgradeneeded`事件中，你可以创建新的对象存储或修改已有的。 3. **读写操作**：使用事务进行数据的增删改查操作，所有数据操作都必须在事务中完成。 4. **创建索引**：在对象存储中定义索引来加速查询。 5. **监听事件**：监听 `success`、`error` 和 `complete` 事件来处理操作结果。 **3. 增加数据** 使用 `put()` 或 `add()` 方法将数据插入到对象存储中。`put()` 用于更新已有键的数据，而 `add()` 用于插入新键，如果键已存在，则会抛出错误。 ```javascript let transaction = db.transaction(['storeName'], 'readwrite'); let store = transaction.objectStore('storeName'); let request = store.add({key: 'value'}); request.onsuccess = function(event) { console.log('Data added successfully!'); }; ``` **4. 查询数据** - **get()**：根据键获取单个数据项。 - **getAll()**：获取所有数据项。 - **openCursor()**：创建游标遍历所有数据或指定范围的数据。 ```javascript let request = store.get('key'); request.onsuccess = function(event) { let data = event.target.result; console.log(data); }; let cursorRequest = store.openCursor(); cursorRequest.onsuccess = function(event) { let cursor = event.target.result; if (cursor) { console.log(cursor.value); cursor.continue(); } }; ``` **5. 修改和删除数据** - **put()**：更新数据时，如果键不存在则插入新数据。 - **delete()**：根据键删除数据项。 - **clear()**：清空整个对象存储的所有数据。 ```javascript let request = store.delete('key'); request.onsuccess = function() { console.log('Data deleted successfully!'); }; store.clear(); console.log('All data cleared!'); ``` **6. 索引的创建和使用** 索引可以在创建对象存储时定义，也可以在之后添加。索引可以基于一个或多个属性，支持多种比较模式。 ```javascript let index = store.createIndex('nameIndex', 'name', {unique: true}); let keyRange = IDBKeyRange.lowerBound('M'); let indexRequest = index.openKeyCursor(keyRange); indexRequest.onsuccess = function(event) { let cursor = event.target.result; if (cursor) { console.log(cursor.key + ': ' + cursor.primaryKey); cursor.continue(); } }; ``` **7. 封装 IndexedDB 操作** 为了简化 IndexedDB 的使用，通常会创建一个专门的模块或类来封装常用操作，如打开数据库、增加、查询、修改和删除等。这使得代码更易于管理和复用。 ```javascript class IndexedDBHelper { constructor(dbName, version) { // 初始化逻辑... } openDatabase() { // 打开或创建数据库... } addData(storeName, data) { // 插入数据... } getDataByKey(storeName, key) { // 获取数据... } updateData(storeName, key, newData) { // 更新数据... } deleteData(storeName, key) { // 删除数据... } // 其他方法... } ``` 通过封装，我们可以在应用中更方便地使用 IndexedDB，提高代码的可维护性和一致性。 HTML5 的 IndexedDB 提供了强大的本地存储能力，能够支持复杂的数据操作。理解其基本概念和操作流程，并学会封装和使用，是开发高性能Web应用的关键技能之一。在实际项目中，合理利用 IndexedDB 可以显著提升用户体验，特别是在离线存储和大数据量场景下。