HTML5 Web IndexedDB 数据库

news/2024/12/28 7:22:02/

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/news/1558730.html

相关文章

VIVO Android面试题及参考答案

请重写算法题:求数组的全排列。 思路: 要获取一个数组的全排列,我们可以利用回溯算法。具体来说,回溯算法通过递归的方式逐步生成排列,在每一步都将一个元素加入排列中,然后在下一步递归中排除已选元素,回溯的时候撤销选择,尝试其他可能。 步骤: 递归生成排列: 使…

Microsoft word@【标题样式】应用不生效(主要表现为在导航窗格不显示)

背景 随笔。Microsoft word 2013基础使用,仅做参考和积累。 问题 Microsoft word 2013,对段落标题文字应用【标题样式】不生效(主要表现为在导航窗格不显示)。 图1 图2 观察图1和图2,发现图1的文字在应用【标题一】样…

公路边坡安全监测中智能化+定制化+全面守护的应用方案

面对公路边坡的安全挑战,我们如何精准施策,有效应对风险?特别是在强降雨等极端天气下,如何防范滑坡、崩塌、路面塌陷等灾害,确保行车安全?国信华源公路边坡安全监测解决方案,以智能化、定制化为…

修改网络ip地址方法有哪些?常用的有这四种

在数字时代,IP地址作为网络设备的唯一标识,对于网络连接和通信至关重要。然而,有时候我们可能需要修改设备的IP地址,以满足特定的网络需求或解决网络问题。本文将为您详细介绍几种修改网络IP地址的常用方法,无论是对于…

基于python网络爬虫的搜索引擎设计

一、毕业设计(论文)题目:基于网络爬虫的搜索引擎设计 - 基于网络爬虫的搜索引擎设计1 二、毕业设计(论文)工作自 2022-09-01 起至 2022-10-28 止 三、毕业设计(论文)内容要求: 主…

Jupyter占用内存高问题排查解决

前言 前段时间我们上线了实例内存预警功能,方便大家更好地管理服务器内存资源。那么,也有同学会问,如果收到系统通知,我该怎么做呢?系统提示交换内存占用过高,但是又不知道是哪些程序占用的,怎么…

【网络安全 | 漏洞挖掘】价值$3000的Google Slides IDOR漏洞

未经许可,不得转载。 文章目录 正文漏洞奖励正文 某天下午,我在办公室用 Google Slides 制作演讲用的幻灯片。幻灯片完成后,我点击了“演示者视图”来预览。在活动期间,我计划与观众进行实时问答,于是上网查找 Google Slides 是否有相关功能。就这样,我发现了“观众工具…

Windows配置IE浏览器不自动跳转到Edge

一:使用 IE 浏览器自身设置(部分情况有效) 打开 IE 浏览器设置:启动 IE 浏览器,点击右上角的 “工具”(齿轮形状)图标,选择 “Internet 选项”。设置启动选项:在 “Inte…