HTML5 Web IndexedDB 数据库

打印 上一主题 下一主题

主题 973|帖子 973|积分 2919

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():用于打开现有数据库或创建新数据库。
  1. var request = indexedDB.open('databaseName', version);
复制代码
2、db.createObjectStore():在 onupgradeneeded 变乱中创建对象存储(类似表)。
  1. var objectStore = db.createObjectStore('storeName', { keyPath: 'id' });
复制代码
3、objectStore.add():在事务中向对象存储中添加数据。
  1. objectStore.add({ id: 1, name: 'John Doe' });
复制代码
3、objectStore.get():根据键值从对象存储中获取数据。
  1. var request = objectStore.get(1);
复制代码
4、objectStore.put():更新现有记载,若记载不存在则插入。
  1. objectStore.put({ id: 1, name: 'John Updated' });
复制代码
5、objectStore.delete():根据键值删除记载。
  1. objectStore.delete(1);
复制代码
6、db.transaction():创建事务,指定对象存储名称和事务模式(readonly 或 readwrite)。
  1. var transaction = db.transaction(['storeName'], 'readwrite');
复制代码
7、objectStore.createIndex():为对象存储中的字段创建索引,以便更快的查询。
  1. 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企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

天空闲话

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表