当前位置：首页 > article >正文

HTML5 Web IndexedDB 数据库

article 2024/12/24 16:27:02

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.οnerrοr=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:‘john@example.com’});
objectStore.add({id:2,name:‘Jane Doe’,email:‘jane@example.com’});

transaction.oncomplete=function(){
console.log(‘Transaction completed: data added.’);
};

transaction.οnerrοr=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:‘johnsmith@example.com’};

updateObjectStore.put(updatedCustomer);

updateTransaction.oncomplete=function(){
console.log(‘Transaction completed: data updated.’);
};
};

// 错误处理
request.οnerrοr=function(event){
console.error(‘Database error:’,event.target.error);
};