浏览器内置NoSQL数据库IndexedDB

IndexedDB - 浏览器内容数据库

indexedDB 是一种浏览器内置的NoSQL数据库,它使用键值对存储数据,用于在客户端存储大量结构化数据。它支持离线应用程序和高效的数据检索,可以在 Web 应用程序中替代传统的 cookie 和 localStorage。

IndexDB是一种在浏览器中内置的NoSQL数据库,用于在客户端存储和检索数据。它提供了一种持久存储数据的方式,可以在离线状态下使用。

使用 indexedDB 需要以下步骤:

  1. 打开数据库:使用 indexedDB.open() 方法打开一个数据库,如果数据库不存在,则会创建一个新的数据库。

  2. 创建对象存储空间:使用 createObjectStore() 方法创建一个对象存储空间,用于存储数据。可以为每个对象存储空间设置一个名称和一个键路径,键路径用于指定对象存储空间中的每个对象的唯一标识符。

  3. 存储数据:使用 add() 或 put() 方法将数据存储到对象存储空间中。add() 方法用于向对象存储空间中添加新的数据,如果该数据已经存在,则会抛出错误。put() 方法用于向对象存储空间中添加或更新数据。

  4. 检索数据:使用 get() 或 getAll() 方法从对象存储空间中检索数据。get() 方法用于检索指定键路径的数据,getAll() 方法用于检索对象存储空间中的所有数据。

  5. 删除数据:使用 delete() 方法从对象存储空间中删除指定键路径的数据。

  6. 关闭数据库:使用 close() 方法关闭数据库连接。

需要注意的是,indexedDB 使用异步 API,需要使用回调函数或 Promise 处理返回结果。此外,indexedDB 只能在支持该 API 的浏览器中使用,需要检查浏览器是否支持 indexedDB API。

indexedDB 和 localStorage 的区别

indexedDB 和 localStorage 都是浏览器提供的客户端存储方案,它们之间的区别主要有以下几点:

  1. 数据存储方式:localStorage 存储的是字符串类型的数据,而 indexedDB 存储的是结构化数据。indexedDB 支持存储复杂的数据类型,例如对象、数组等,而 localStorage 只能存储字符串类型的数据。

  2. 存储容量:localStorage 的存储容量通常为 5MB 左右,而 indexedDB 的存储容量通常为几百 MB 或几 GB。indexedDB 可以存储大量的数据,适用于需要存储大量结构化数据的应用程序。

  3. 数据检索方式:indexedDB 支持基于索引的高效数据检索,可以通过索引快速查询数据。而 localStorage 只能遍历整个数据集合进行数据检索,效率较低。

  4. 事务支持:indexedDB 支持事务操作,可以确保数据的一致性和完整性。而 localStorage 不支持事务操作,无法保证数据的一致性和完整性。

  5. 浏览器支持:indexedDB API 在较新版本的浏览器中得到支持,而 localStorage API 在大多数浏览器中都得到支持。

综上所述,indexedDB 更适合存储大量结构化数据,并且支持高效的数据检索和事务操作;而 localStorage 更适合存储少量简单的字符串类型数据。

demo演示:

js 复制代码
// 打开或创建一个名为"myDatabase"的数据库
const request = indexedDB.open('myDatabase', 1);

// 当数据库打开成功时触发
request.onsuccess = function(event) {
  const db = event.target.result;

  // 创建一个名为"myObjectStore"的对象存储空间
  const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });

  // 添加一些数据到对象存储空间
  const data = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
  ];
  // 通过db.transaction('myObjectStore', 'readwrite')创建一个名为myObjectStore的对象存储空间的读写事务。这里的'readwrite'表示事务的模式,允许读取和写入数据。
  const transaction = db.transaction('myObjectStore', 'readwrite');
  // 通过transaction.objectStore('myObjectStore')获取到名为myObjectStore的对象存储空间的引用,以便后续对该对象存储空间进行操作,如添加、更新或删除数据。
  const store = transaction.objectStore('myObjectStore');

  data.forEach(function(item) {
    store.add(item);
  });

  // 数据添加完成后,关闭数据库连接
  transaction.oncomplete = function() {
    db.close();
  };
};

// 当数据库打开失败时触发
request.onerror = function(event) {
  console.log('打开数据库失败');
};

keyPath是IndexDB中用于定义对象存储空间中每个对象的唯一键的属性。这个键可以是任何一个对象中的属性,例如ID、名称或日期等。在创建对象存储空间时,可以通过指定keyPath属性来定义唯一键。这样,在添加、更新或删除数据时,可以使用这个唯一键来引用和操作对象。

相关推荐
时差9531 小时前
【面试题】Hive 查询:如何查找用户连续三天登录的记录
大数据·数据库·hive·sql·面试·database
让学习成为一种生活方式1 小时前
R包下载太慢安装中止的解决策略-R语言003
java·数据库·r语言
Mephisto.java1 小时前
【大数据学习 | kafka高级部分】kafka的优化参数整理
大数据·sql·oracle·kafka·json·database
秋意钟2 小时前
MySQL日期类型选择建议
数据库·mysql
Dxy12393102162 小时前
python下载pdf
数据库·python·pdf
桀桀桀桀桀桀3 小时前
数据库中的用户管理和权限管理
数据库·mysql
BearHan4 小时前
Sqlsugar调用Oracle的存储过程
oracle·存储过程·orm
superman超哥4 小时前
04 深入 Oracle 并发世界:MVCC、锁、闩锁、事务隔离与并发性能优化的探索
数据库·oracle·性能优化·dba
用户8007165452004 小时前
HTAP数据库国产化改造技术可行性方案分析
数据库
engchina5 小时前
Neo4j 和 Python 初学者指南:如何使用可选关系匹配优化 Cypher 查询
数据库·python·neo4j