HTML5 Web IndexedDB 数据库常用数据存储类型

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 Tair(兼容Redis),内存型 2GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
简介: IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。

IndexedDB 支持多种数据存储类型,允许开发者存储复杂的数据结构。以下是一些常见的数据存储类型和它们的特点:

1. 基本数据类型

这些是 JavaScript 中的基本类型,可以直接存储到 IndexedDB 中:

  • Number: 存储数字。
  • String: 存储字符串。
  • Boolean: 存储布尔值(truefalse)。
  • Date: 存储日期对象,在存储时会被转化为时间戳。

2. 对象

IndexedDB 最常用的存储类型是对象。可以将任何 JavaScript 对象存储到 IndexedDB 中。这些对象可以是:

  • 简单对象: 例如 { id: 1, name: 'John Doe' }
  • 嵌套对象: 对象中包含其他对象,例如 { id: 1, name: 'John Doe', address: { city: 'New York', zip: '10001' } }

3. 数组

IndexedDB 允许存储数组格式的数据。数组可以包含基本数据类型或对象。

const data = {
   
    id: 1,
    names: ['John', 'Jane', 'Doe']
};

4. Blob

Blob(Binary Large Object)是一种用于存储二进制数据的类型,适用于存储图像、音频、视频文件等。可以用 FileBlob 对象实例。

const imageBlob = new Blob([imageData], {
    type: 'image/png' });

5. ArrayBuffer 和 Typed Arrays

ArrayBuffer 用于表示通用的、固定长度的二进制数据缓冲区。Typed Arrays(如 Uint8ArrayFloat32Array 等)可以用于强类型的二进制数据存储。

const buffer = new ArrayBuffer(16);
const view = new Uint8Array(buffer);

6. 结构化克隆

IndexedDB 使用了结构化克隆算法,可以存储更复杂的对象,包括循环引用和其他特殊类型(如 MapSet)。这使得开发者可以存储更复杂的数据结构。

const myMap = new Map();
myMap.set('key1', 'value1');

// 结构化克隆可以存储 Map 对象
const dataToStore = {
   
    myMap: myMap
};

7. JSON

虽然 IndexedDB 中不能直接存储 JSON 字符串,但你可以将对象转换为 JSON 字符串,然后存储它们,反之亦然。虽然这样做是可行的,但建议直接存储对象以利用对象的特性。

const jsonString = JSON.stringify({
    id: 1, name: 'John Doe' });

8. 非序列化的数据

IndexedDB 不支持直接存储一些复杂类型(如函数、DOM 节点等)。在存储这些类型的对象时,需要先转换为可序列化的数据格式。

总结

IndexedDB 支持多种数据存储类型,能够满足不同应用的需求。在实际应用中,通常会结合使用以上数据类型,以实现复杂的数据存储和管理功能。在选择数据类型时,开发者应注意数据的结构和存取方式,以确保最佳的性能和使用体验。

相关文章
|
16天前
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日,「2024 Altair 技术大会杭州站」成功召开,阿里云弹性计算产品运营与生态负责人何川,与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
阿里云携手Altair共拓云上工业仿真新机遇
|
13天前
|
机器学习/深度学习 算法 大数据
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析
2024“华为杯”数学建模竞赛,对ABCDEF每个题进行详细的分析,涵盖风电场功率优化、WLAN网络吞吐量、磁性元件损耗建模、地理环境问题、高速公路应急车道启用和X射线脉冲星建模等多领域问题,解析了问题类型、专业和技能的需要。
2547 19
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析
|
13天前
|
机器学习/深度学习 算法 数据可视化
【BetterBench博士】2024年中国研究生数学建模竞赛 C题:数据驱动下磁性元件的磁芯损耗建模 问题分析、数学模型、python 代码
2024年中国研究生数学建模竞赛C题聚焦磁性元件磁芯损耗建模。题目背景介绍了电能变换技术的发展与应用,强调磁性元件在功率变换器中的重要性。磁芯损耗受多种因素影响,现有模型难以精确预测。题目要求通过数据分析建立高精度磁芯损耗模型。具体任务包括励磁波形分类、修正斯坦麦茨方程、分析影响因素、构建预测模型及优化设计条件。涉及数据预处理、特征提取、机器学习及优化算法等技术。适合电气、材料、计算机等多个专业学生参与。
1543 16
【BetterBench博士】2024年中国研究生数学建模竞赛 C题:数据驱动下磁性元件的磁芯损耗建模 问题分析、数学模型、python 代码
|
9天前
|
存储 关系型数据库 分布式数据库
GraphRAG:基于PolarDB+通义千问+LangChain的知识图谱+大模型最佳实践
本文介绍了如何使用PolarDB、通义千问和LangChain搭建GraphRAG系统,结合知识图谱和向量检索提升问答质量。通过实例展示了单独使用向量检索和图检索的局限性,并通过图+向量联合搜索增强了问答准确性。PolarDB支持AGE图引擎和pgvector插件,实现图数据和向量数据的统一存储与检索,提升了RAG系统的性能和效果。
|
11天前
|
人工智能 IDE 程序员
期盼已久!通义灵码 AI 程序员开启邀测,全流程开发仅用几分钟
在云栖大会上,阿里云云原生应用平台负责人丁宇宣布,「通义灵码」完成全面升级,并正式发布 AI 程序员。
|
15天前
|
编解码 JSON 自然语言处理
通义千问重磅开源Qwen2.5,性能超越Llama
击败Meta,阿里Qwen2.5再登全球开源大模型王座
698 14
|
10天前
|
人工智能 开发框架 Java
重磅发布!AI 驱动的 Java 开发框架:Spring AI Alibaba
随着生成式 AI 的快速发展,基于 AI 开发框架构建 AI 应用的诉求迅速增长,涌现出了包括 LangChain、LlamaIndex 等开发框架,但大部分框架只提供了 Python 语言的实现。但这些开发框架对于国内习惯了 Spring 开发范式的 Java 开发者而言,并非十分友好和丝滑。因此,我们基于 Spring AI 发布并快速演进 Spring AI Alibaba,通过提供一种方便的 API 抽象,帮助 Java 开发者简化 AI 应用的开发。同时,提供了完整的开源配套,包括可观测、网关、消息队列、配置中心等。
529 8
|
3天前
|
Docker 容器
Docker操作 (五)
Docker操作 (五)
141 68
|
3天前
|
Docker 容器
Docker操作 (三)
Docker操作 (三)
131 69
|
15天前
|
人工智能 自动驾驶 机器人
吴泳铭:AI最大的想象力不在手机屏幕,而是改变物理世界
过去22个月,AI发展速度超过任何历史时期,但我们依然还处于AGI变革的早期。生成式AI最大的想象力,绝不是在手机屏幕上做一两个新的超级app,而是接管数字世界,改变物理世界。
561 49
吴泳铭:AI最大的想象力不在手机屏幕,而是改变物理世界