IT评测·应用市场-qidao123.com

标题: HTML5 Web IndexedDB 数据库 [打印本页]

作者: 天空闲话 时间: 2025-1-8 05:00
标题: HTML5 Web IndexedDB 数据库
IndexedDB 是一种基于浏览器的 NoSQL 数据库，用于在客户端持久化存储大量结构化数据。
IndexedDB 允许通过键值对存储复杂的数据对象（如对象、数组、文件等），并支持事务、索引、版本控制和复杂查询操纵。
IndexedDB 是异步的，不会壅闭主线程，得当离线应用程序、缓存等场景。
IndexedDB 非常得当需要存储大量结构化数据的应用程序，尤其是那些盼望支持离线模式或处理复杂查询的 Web 应用。
IndexedDB 特性

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

IndexedDB 语法

IndexedDB 语法说明如下：
// 打开或创建一个数据库
var request = indexedDB.open('databaseName', version);

// 处理数据库升级
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // 创建对象存储（表）并设置主键
  var objectStore = db.createObjectStore('storeName', { keyPath: 'id' });

  // 创建索引
objectStore.createIndex('fieldName', 'fieldName', { unique: false });
};

// 数据库打开乐成时的回调
request.onsuccess = function(event) {
  var db = event.target.result;

  // 进行事务操纵
  var transaction = db.transaction('storeName', 'readwrite');
  var objectStore = transaction.objectStore('storeName');

  // 插入数据
objectStore.add({ id: 1, name: 'John Doe', age: 30 });

  // 查询数据
  var query = 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 实例，用于创建数据库、插入数据、查询数据并更新数据。
实例

// 打开或创建数据库
var request = indexedDB.open('myDatabase', 1);

// 假如数据库版本厘革或初次创建时触发
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // 创建对象存储（表），设置主键为 'id'
  var objectStore = db.createObjectStore('customers', { keyPath: 'id' });

  // 为 'name' 字段创建索引
objectStore.createIndex('name', 'name', { unique: false });
};

// 打开数据库乐成
request.onsuccess = function(event) {
  var db = event.target.result;

  // 插入数据
  var transaction = db.transaction(['customers'], 'readwrite');
  var objectStore = 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.onerror = function(event) {
console.error('Transaction failed:', event);
  };

  // 查询数据
  var queryTransaction = db.transaction(['customers']);
  var queryObjectStore = queryTransaction.objectStore('customers');
  var query = queryObjectStore.get(1);

query.onsuccess = function(event) {
console.log('Customer:', event.target.result);
  };

  // 更新数据
  var updateTransaction = db.transaction(['customers'], 'readwrite');
  var updateObjectStore = updateTransaction.objectStore('customers');
  var updatedCustomer = { id: 1, name: 'John Smith', email: 'johnsmith@example.com' };

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 应用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)