浏览器内置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属性来定义唯一键。这样,在添加、更新或删除数据时,可以使用这个唯一键来引用和操作对象。

相关推荐
JH30733 分钟前
Oracle与MySQL中CONCAT()函数的使用差异
数据库·mysql·oracle
蓝染-惣右介5 分钟前
【MyBatisPlus·最新教程】包含多个改造案例,常用注解、条件构造器、代码生成、静态工具、类型处理器、分页插件、自动填充字段
java·数据库·tomcat·mybatis
冷心笑看丽美人6 分钟前
Spring框架特性及包下载(Java EE 学习笔记04)
数据库
武子康1 小时前
Java-07 深入浅出 MyBatis - 一对多模型 SqlMapConfig 与 Mapper 详细讲解测试
java·开发语言·数据库·sql·mybatis·springboot
代码吐槽菌2 小时前
基于SSM的毕业论文管理系统【附源码】
java·开发语言·数据库·后端·ssm
路有瑶台2 小时前
MySQL数据库学习(持续更新ing)
数据库·学习·mysql
数字扫地僧2 小时前
WebLogic 版本升级的注意事项与流程
数据库
Viktor_Ye2 小时前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
努力算法的小明3 小时前
SQL 复杂查询
数据库·sql
斗-匕3 小时前
MySQL 三大日志详解
数据库·mysql·oracle