HTML5 Web IndexedDB 数据库

IndexedDB 是一种基于浏览器的 NoSQL 数据库，用于在客户端持久化存储大量结构化数据。

IndexedDB 允许通过键值对存储复杂的数据对象（如对象、数组、文件等），并支持事务、索引、版本控制和复杂查询操作。

IndexedDB 是异步的，不会阻塞主线程，适合离线应用程序、缓存等场景。

IndexedDB 非常适合需要存储大量结构化数据的应用程序，尤其是那些希望支持离线模式或处理复杂查询的 Web 应用。

IndexedDB 特性

键值对存储 ：数据以键值对的形式存储在对象存储（object store）中。
事务支持 ：所有数据操作必须在事务内完成，以确保数据一致性和完整性。
异步 API ：所有操作都是异步的，不会阻塞 UI 线程，使用事件回调或 Promises 来处理结果。
版本控制 ：数据库使用版本号来管理数据库的架构（如创建或修改对象存储）。
索引：支持对数据的字段建立索引，以加快查询速度。
离线支持 ：数据可以持久化存储并在断网情况下继续访问，非常适合构建离线 Web 应用。

IndexedDB 语法

IndexedDB 语法说明如下：

示例代码

// 打开或创建一个数据库varrequest=indexedDB.open('databaseName',version);// 处理数据库升级request.onupgradeneeded=function(event){vardb=event.target.result;// 创建对象存储（表）并设置主键varobjectStore=db.createObjectStore('storeName',{keyPath:'id'});// 创建索引objectStore.createIndex('fieldName','fieldName',{unique:false});};// 数据库打开成功时的回调request.onsuccess=function(event){vardb=event.target.result;// 进行事务操作vartransaction=db.transaction('storeName','readwrite');varobjectStore=transaction.objectStore('storeName');// 插入数据objectStore.add({id:1,name:'John Doe',age:30});// 查询数据varquery=objectStore.get(1);query.onsuccess=function(event){console.log(event.target.result);};};// 错误处理request.onerror=function(event){console.error('Database error:',event.target.error);};

IndexedDB 方法

1、indexedDB.open()： 用于打开现有数据库或创建新数据库。


var request = indexedDB.open('databaseName', version);

2、db.createObjectStore()： 在 onupgradeneeded 事件中创建对象存储（类似表）。


var objectStore = db.createObjectStore('storeName', { keyPath: 'id' });

3、objectStore.add()： 在事务中向对象存储中添加数据。


objectStore.add({ id: 1, name: 'John Doe' });

3、objectStore.get()： 根据键值从对象存储中获取数据。


var request = objectStore.get(1);

4、objectStore.put()： 更新现有记录，若记录不存在则插入。


objectStore.put({ id: 1, name: 'John Updated' });

5、objectStore.delete()： 根据键值删除记录。


objectStore.delete(1);

6、db.transaction()： 创建事务，指定对象存储名称和事务模式（readonly 或 readwrite）。


var transaction = db.transaction(['storeName'], 'readwrite');

7、objectStore.createIndex()： 为对象存储中的字段创建索引，以便更快的查询。


objectStore.createIndex('nameIndex', 'name', { unique: false });

IndexedDB 应用实例

以下是一个完整的 IndexedDB 实例，用于创建数据库、插入数据、查询数据并更新数据。

示例代码

// 打开或创建数据库varrequest=indexedDB.open('myDatabase',1);// 如果数据库版本变化或首次创建时触发request.onupgradeneeded=function(event){vardb=event.target.result;// 创建对象存储（表），设置主键为 'id'varobjectStore=db.createObjectStore('customers',{keyPath:'id'});// 为 'name' 字段创建索引objectStore.createIndex('name','name',{unique:false});};// 打开数据库成功request.onsuccess=function(event){vardb=event.target.result;// 插入数据vartransaction=db.transaction(['customers'],'readwrite');varobjectStore=transaction.objectStore('customers');objectStore.add({id:1,name:'John Doe',email:'[email protected]'});objectStore.add({id:2,name:'Jane Doe',email:'[email protected]'});transaction.oncomplete=function(){console.log('Transaction completed: data added.');};transaction.onerror=function(event){console.error('Transaction failed:',event);};// 查询数据varqueryTransaction=db.transaction(['customers']);varqueryObjectStore=queryTransaction.objectStore('customers');varquery=queryObjectStore.get(1);query.onsuccess=function(event){console.log('Customer:',event.target.result);};// 更新数据varupdateTransaction=db.transaction(['customers'],'readwrite');varupdateObjectStore=updateTransaction.objectStore('customers');varupdatedCustomer={id:1,name:'John Smith',email:'[email protected]'};updateObjectStore.put(updatedCustomer);updateTransaction.oncomplete=function(){console.log('Transaction completed: data updated.');};};// 错误处理request.onerror=function(event){console.error('Database error:',event.target.error);};

IndexedDB 使用场景

离线存储：IndexedDB 允许你存储数据以便在没有网络连接时访问，这对于离线 Web 应用至关重要。
缓存：可以用于存储大量缓存数据（如文件、图片、视频），提升应用的加载速度。
复杂数据处理：适用于需要存储和处理大量结构化数据的场景，尤其是需要索引和查询功能。
本地数据库：IndexedDB 可以作为前端应用的本地数据库，存储用户数据、配置信息、应用状态等。

IndexedDB 的优势

大容量存储：支持更大数据存储（常常可以达到几百 MB 或更多），比 localStorage 的 5MB 限制大得多。
丰富的数据操作：支持事务、索引、查询、批量处理等复杂操作。
离线支持：数据保存在用户设备上，可以离线访问并同步到服务器。

IndexedDB 的劣势

API 复杂：相比 localStorage 等简单的客户端存储，IndexedDB API 相对复杂，需要更多的代码。
异步处理：操作异步执行，初学者可能会不习惯处理回调或 Promise。
IndexedDB 非常适合需要存储大量结构化数据的应用程序，尤其是那些希望支持离线模式或处理复杂查询的 Web 应用。

HTML5 Web IndexedDB - HTML5教程