HTML5 Web IndexedDB 数据库

embedded/2024/12/28 23:11:11/

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);
};


IndexedDB 使用场景

  • 离线存储:IndexedDB 允许你存储数据以便在没有网络连接时访问,这对于离线 Web 应用至关重要。

  • 缓存:可以用于存储大量缓存数据(如文件、图片、视频),提升应用的加载速度。

  • 复杂数据处理:适用于需要存储和处理大量结构化数据的场景,尤其是需要索引和查询功能。

  • 本地数据库:IndexedDB 可以作为前端应用的本地数据库,存储用户数据、配置信息、应用状态等。


IndexedDB 的优势

  • 大容量存储:支持更大数据存储(常常可以达到几百 MB 或更多),比 localStorage 的 5MB 限制大得多。

  • 丰富的数据操作:支持事务、索引、查询、批量处理等复杂操作。

  • 离线支持:数据保存在用户设备上,可以离线访问并同步到服务器。


IndexedDB 的劣势

  • API 复杂:相比 localStorage 等简单的客户端存储,IndexedDB API 相对复杂,需要更多的代码。

  • 异步处理:操作异步执行,初学者可能会不习惯处理回调或 Promise。

  • IndexedDB 非常适合需要存储大量结构化数据的应用程序,尤其是那些希望支持离线模式或处理复杂查询的 Web 应用。


http://www.ppmy.cn/embedded/149581.html

相关文章

元宇宙中的去中心化应用:Web3的未来角色

Web3作为新一代互联网架构,正在彻底改变我们对在线服务和平台的理解。去中心化、透明、安全、无需信任的特点使得Web3成为一种全新的数字化生态系统,而智能合约则是Web3中的核心技术之一。本文将探讨智能合约如何在Web3环境中推动去中心化平台的自动化操…

【SQL】筛选某一列字段中,截取含有关键词“XX”字段位置的前4个字段,去重后查看字段

最近在查询数据库的一些数据,想要统计表格里有多少公司,发现表格里没有公司这一列,只能从但是有一些标题字段,只能从中筛选。 假设关键词是[公司],我们要在数据库的表格中,找到名为title的列,列…

一个简单封装的的nodejs缓存对象

我们在日常编码中,经常会用到缓存,而一个有效的缓存管理,也是大家必不可少的工具。而nodejs没有内置专用的缓存对象,并且由于js的作用域链的原因,很多变量使用起来容易出错,如果用一个通用的缓存管理起来&a…

开源赋能未来:2024年开源创新榜单重大科技成就发布会

非常荣幸受邀参加了 2024年开源创新榜单重大科技成就发布会(开源专场活动),让我对中国开源生态的快速发展和开源技术在各个领域中的应用有了一些新的认识。这场活动展示了国内在开源领域的部分最新成果,让我切实感受到开源精神对技…

SQL中的TRIM用法

TRIM 是 SQL 中用于去除字符串两端(左侧和右侧)的空格或特定字符的函数。这个函数常用于清理数据中的无效空白字符,尤其是在从外部系统导入数据时,常常会遇到数据两端有不必要的空格,使用 TRIM 可以去除这些多余的字符…

(CentOs系统虚拟机)Standalone模式下安装部署“基于Python编写”的Spark框架

前提:建议先学过hadoop再看,涉及大量hadoop知识点 一、理论先知 1、Spark四种运行模式 1)Local模式(开发环境) 用于开发和测试阶段,在单机节点上,一个Spark程序就只是一个进程,通过…

MongoDB数据库安全

MongoDB数据库安全 一、身份验证 内置身份验证机制 MongoDB支持多种身份验证方式。最常见的是基于用户名和密码的身份验证。在MongoDB中,可以通过创建用户并分配角色来控制对数据库的访问。例如,在mongo shell中,可以使用use admin切换到ad…

【WebSocket】tomcat内部处理websocket的过程

websocket请求格式 浏览器请求 GET /webfin/websocket/ HTTP/1.1。 Host: localhost。 Upgrade: websocket。 Connection: Upgrade。 Sec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg。 Origin: http://服务器地址。 Sec-WebSocket-Version: 13。 服务器响应 HTTP/1.1 101 Swi…