IndexedDB基本使用

随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。

背景

现有的浏览器数据储存方案，都不适合储存大量数据：

  • Cookie 的大小不超过4KB，且每次请求都会发送回服务器
  • LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引

这就是 IndexedDB 诞生的背景。

特点

宏观特点

  • 允许储存大量数据
  • 提供查找接口
  • 能建立索引
  • 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

微观特点

  • 键值对存储（所有类型的数据都可以直接存入，主键是独一无二的，不能有重复，否则会抛出一个错误）
  • 异步（操作时不会锁死浏览器）
  • 支持事务（这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况）
  • 同源限制（每一个数据库对应创建它的域名，网页只能访问自身域名下的数据库，而不能访问跨域的数据库）
  • 存储空间大（一般来说不少于 250MB，甚至没有上限）
  • 支持二进制存储（可以储存二进制数据ArrayBuffer 对象和 Blob 对象）

基本概念

IndexedDB 是一个比较复杂的 API，涉及不少概念。

  • 数据库：IDBDatabase 对象
  • 对象仓库：IDBObjectStore 对象
  • 索引： IDBIndex 对象
  • 事务： IDBTransaction 对象
  • 操作请求：IDBRequest 对象
  • 指针： IDBCursor 对象
  • 主键集合：IDBKeyRange 对象

数据库

数据库是一系列相关数据的容器。每个域名（严格的说，是协议 + 域名 + 端口）都可以新建任意多个数据库。

IndexedDB 数据库有版本的概念。同一个时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或者主键），只能通过升级数据库版本完成。

对象仓库

每个数据库包含若干个对象仓库（object store）。它类似于关系型数据库的表格。

数据记录

对象仓库保存的是数据记录。每条记录类似于关系型数据库的行，但是只有主键和数据体两部分。主键用来建立默认的索引，必须是不同的，否则会报错。主键可以是数据记录里面的一个属性，也可以指定为一个递增的整数编号。

{ id: 1, text: 'foo' }

上面的对象中，id属性可以当作主键。

数据体可以是任意数据类型，不限于对象。

索引

为了加速数据的检索，可以在对象仓库里面，为不同的属性建立索引。

事务

数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件，用来监听操作结果。

操作流程

打开数据库

使用 IndexedDB 的第一步是打开数据库，使用indexedDB.open()方法。

var db;// databaseName数据库的名字 version版本
const request = window.indexedDB.open(databaseName, version);// 打开数据库失败
request.onerror = function (event) {console.log('数据库打开报错');
};// 成功打开数据库，通过request对象的result属性拿到数据库对象
request.onsuccess = function (event) {db = request.result;console.log('数据库打开成功');
};// 如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件。这时通过事件对象的target.result属性，拿到数据库实例。
request.onupgradeneeded = function (event) {db = event.target.result;
}

注意： 如果指定的数据库不存在，就会新建数据库。如果省略版本，打开已有数据库时，默认为当前版本；新建数据库时，默认为1。

建立新数据库

新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。

不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件。

新建对象仓库(建表)
request.onupgradeneeded = function(event) {db = event.target.result;var objectStore;// 判断person是否存在if (!db.objectStoreNames.contains('person')) {// 新增一张叫做person的表格，主键是id// 1.指定idobjectStore = db.createObjectStore('person', { keyPath: 'id' });// 2.自动生成idobjectStore = db.createObjectStore('person',{ autoIncrement: true });}
}
新建索引

新建对象仓库以后，下一步可以新建索引。

request.onupgradeneeded = function(event) {db = event.target.result;var objectStore = db.createObjectStore('person', { keyPath: 'id' });// name索引的名称 name索引的属性 指定了索引是否唯一objectStore.createIndex('name', 'name', { unique: false });objectStore.createIndex('email', 'email', { unique: true });
}
新增数据

新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。

function add() {// 创建一个事务 person存储空间名称 readwrite将进行读写操作(事务模式)var request = db.transaction(['person'], 'readwrite').objectStore('person').add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' });request.onsuccess = function (event) {console.log('数据写入成功');};request.onerror = function (event) {console.log('数据写入失败');}
}add();
读取数据

读取数据也是通过事务完成。

function read() {var transaction = db.transaction(['person']);var objectStore = transaction.objectStore('person');var request = objectStore.get(1);request.onerror = function(event) {console.log('事务失败');};request.onsuccess = function( event) {if (request.result) {console.log('Name: ' + request.result.name);console.log('Age: ' + request.result.age);console.log('Email: ' + request.result.email);} else {console.log('未获得数据记录');}};
}read();
更新数据

更新数据要使用IDBObject.put()方法。

function update() {var request = db.transaction(['person'], 'readwrite').objectStore('person').put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });request.onsuccess = function (event) {console.log('数据更新成功');};request.onerror = function (event) {console.log('数据更新失败');}
}update();
删除数据

IDBObjectStore.delete()方法用于删除记录。

function remove() {var request = db.transaction(['person'], 'readwrite').objectStore('person').delete(1);request.onsuccess = function (event) {console.log('数据删除成功');};
}remove();
遍历数据

遍历数据表格的所有记录，要使用指针对象 IDBCursor。

function readAll() {var objectStore = db.transaction('person').objectStore('person');objectStore.openCursor().onsuccess = function (event) {var cursor = event.target.result;if (cursor) {console.log('Id: ' + cursor.key);console.log('Name: ' + cursor.value.name);console.log('Age: ' + cursor.value.age);console.log('Email: ' + cursor.value.email);cursor.continue();} else {console.log('没有更多数据了！');}};
}readAll();
使用索引

索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键（即从主键取值）。

假定新建表格的时候，对name字段建立了索引。

objectStore.createIndex('name', 'name', { unique: false });

现在，就可以从name找到对应的数据记录了。

var transaction = db.transaction(['person'], 'readonly');
var store = transaction.objectStore('person');
var index = store.index('name');
var request = index.get('李四');request.onsuccess = function (e) {var result = e.target.result;if (result) {// ...} else {// ...}
}
操作文件
存储文件

使用FileReader将文件读取为Blob或ArrayBuffer，然后将其存储到IndexedDB中。

function storeFile(file) {const db = request.result;const transaction = db.transaction(['files'], 'readwrite');const store = transaction.objectStore('files');const reader = new FileReader();reader.onload = function(event) {const fileData = {name: file.name,type: file.type,data: new Blob([event.target.result], { type: file.type })};const request = store.add(fileData);request.onsuccess = function() {console.log('文件存储成功');};request.onerror = function(event) {console.error('文件存储失败', event);};};reader.readAsArrayBuffer(file);
}// 假设你有一个文件输入框
document.getElementById('fileInput').addEventListener('change', function(event) {const file = event.target.files[0];storeFile(file);
});
读取文件

从IndexedDB中读取文件并将其显示在页面上。

function readFile(fileId) {const db = request.result;const transaction = db.transaction(['files'], 'readonly');const store = transaction.objectStore('files');const request = store.get(fileId);request.onsuccess = function(event) {const fileData = event.target.result;if (fileData) {const url = URL.createObjectURL(fileData.data);const img = document.createElement('img');img.src = url;document.body.appendChild(img);} else {console.log('文件未找到');}};request.onerror = function(event) {console.error('文件读取失败', event);};
}// 假设你有一个按钮来读取文件
document.getElementById('readFileButton').addEventListener('click', function() {const fileId = 1; // 假设你要读取ID为1的文件readFile(fileId);
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/455326.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

家庭宽带的ip地址是固定的吗？宽带ip地址怎么修改‌

家庭宽带的ip地址是固定的吗？宽带ip地址怎么修改‌

在家庭网络环境中，IP地址的分配和管理是用户常关注的问题。本文将探讨家庭宽带IP地址的固定性，并介绍如何修改宽带IP地址，以满足用户的不同需求。 一、家庭宽带的IP地址是否固定? 关于家庭宽带的IP地址是否固定，答案并非一概而论…
阅读更多...
【深入学习Redis丨第八篇】详解Redis数据持久化机制

【深入学习Redis丨第八篇】详解Redis数据持久化机制

前言 Redis支持两种数据持久化方式：RDB方式和AOF方式。前者会根据配置的规则定时将内存中的数据持久化到硬盘上，后者则是在每次执行写命令之后将命令记录下来。两种持久化方式可以单独使用，但是通常会将两者结合使用。 一、持久化 1.1、什么…
阅读更多...
【Android】使用 Compose 自定义 View 实现从 0 ~ 1 仿 EChat 柱状图

【Android】使用 Compose 自定义 View 实现从 0 ~ 1 仿 EChat 柱状图

目录 前言DrawScopeDrawScope Api 绘制柱状图绘制 X 轴绘制 Y 轴绘制柱状背景绘制柱状前景完整代码最终效果 存在的问题 前言 本文讲的是使用 compose 去自定义 View ，如果您未曾通过继承 View 的方式去实现自定义 View，那么，我建议在观看本…
阅读更多...
监控-08-skywalking监控告警

监控-08-skywalking监控告警

文章目录 前言一、准备二、配置skywalking2.1 修改alarm-settings.yml2.2 重启skywalking 三、收到告警邮件总结 前言 skywalking根据监控规则，通过webhook调后端微服务接口，从而发送告警邮件。 一、准备 根据上几章内容，保证skywalking能监…
阅读更多...
离散数学实验二c语言(输出关系矩阵，输出矩阵性质，输出自反闭包，对称闭包，传递闭包，判断矩阵是否为等价关系，相容关系，偏序关系)

离散数学实验二c语言(输出关系矩阵，输出矩阵性质，输出自反闭包，对称闭包，传递闭包，判断矩阵是否为等价关系，相容关系，偏序关系)

离散数学实验二 一、算法描述，算法思想 （一）相关数据结构 typedef struct Set *S; //存放集合 struct Set {int size; //集合的元素个数char *A; //存放该集合的元素 }; Set存放有限集合A，该集合的元素个数为size&#xff0…
阅读更多...
Kafka-Windows搭建全流程（环境，安装包，编译，消费案例，远程连接，服务自启，可视化工具）

Kafka-Windows搭建全流程（环境，安装包，编译，消费案例，远程连接，服务自启，可视化工具）

目录 一. Kafka安装包获取 1. 官网地址 2. 百度网盘链接 二. 环境要求 1. Java 运行环境 (1) 对 java 环境变量进行配置 (2) 下载完毕之后进行解压 三. 启动Zookeeper 四. 启动Kafka (1) 修改Conf下的server.properties文件，修改kafka的日志文件路径 (2)…
阅读更多...
海外云手机实现高效的海外社交媒体营销

海外云手机实现高效的海外社交媒体营销

随着全球化的深入发展，越来越多的中国企业走向国际市场，尤其是B2B外贸企业，海外社交媒体营销已成为其扩大市场的重要手段。在复杂多变的海外市场环境中，如何有效提高营销效率并降低运营风险，成为了众多企业的首要任务。…
阅读更多...
无人机悬停精度算法！

无人机悬停精度算法！

一、主要算法类型 PID控制算法： PID控制算法是一种常用的闭环控制算法，通过计算目标值与当前值的误差，并根据比例（P）、积分（I）、微分（D）三个参数来调整控制输出&#x…
阅读更多...
SQL高级查询03

SQL高级查询03

SQL查询语句的下载脚本链接！！！ 【免费】SQL练习资源-具体练习操作可以查看我发布的文章资源-CSDN文库​编辑https://download.csdn.net/download/Z0412_J0103/89908378https://download.csdn.net/download/Z0412_J0103/89908378 1 查询employ…
阅读更多...
聚链成网，趣链科技参与 “跨链创新联合体”建设

聚链成网，趣链科技参与 “跨链创新联合体”建设

近日，2024全球数商大会在上海举办。大会由上海数据集团和上海市数商协会联合主办，上海市数据局和浦东新区人民政府支持，以“数联全球，商通未来——‘链’接数字经济新未来”为主题，聚焦区块链技术和应用场景展开。 会上…
阅读更多...
PostGis空间（下）:空间连接与空间索引

PostGis空间（下）:空间连接与空间索引

目录 1、简介2、空间连接3、空间索引3.1 索引操作3.2 空间索引的工作原理3.2.1 R-Tree 3.3 空间索引函数3.4 仅索引查询3.5 ANALYZE3.6 VACUUMing3.7 函数列表 PS 1024到啦！！！ 先祝各位程序员或者想成为程序员正在奋斗中的伙伴1024程序员节快…
阅读更多...
JavaScript进阶：手写代码挑战(二)

JavaScript进阶：手写代码挑战(二)

​🌈个人主页：前端青山 🔥系列专栏：JavaScript篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript手写代码篇 在现代Web开发中，JavaScript 是不可或缺的编程语言…
阅读更多...
Linux系统基础-进程间通信(5)_模拟实现命名管道和共享内存

Linux系统基础-进程间通信(5)_模拟实现命名管道和共享内存

个人主页：C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 Linux系统基础-进程间通信(5)_模拟实现命名管道和共享内存 收录于专栏[Linux学习] 本专栏旨在分享学习Linux的一点学习笔记，欢迎大家在评论区交流讨…
阅读更多...
Mac 使用 zsh 终端提示 zsh: killed 的问题

Mac 使用 zsh 终端提示 zsh: killed 的问题

我的脚本的内容为： #!/bin/bashset -epids$(ps -ef | grep consul | grep -v grep | awk {print $2})for pid in $pids; doecho "kill process: $pid"kill -9 $pid donecd $(dirname $0)nohup ./consul agent -dev > nohup.log &可以看到这是一个…
阅读更多...
阿里云项目启动OOM问题解决

阿里云项目启动OOM问题解决

问题描述 随着项目业务的增长，系统启动时内存紧张，每次第一次启动的时候就会出现oom第二次或者第n的时候，就启动成功了。 带着这个疑问，我就在阿里云上提交了工单，咨询为什么第一次提交失败但是后面却能提交成功尼&a…
阅读更多...
Matlab学习01-矩阵

Matlab学习01-矩阵

目录 一，矩阵的创建 1，直接输入法创建矩阵 2，利用M文件创建矩阵 3，利用其它文本编辑器创建矩阵 二，矩阵的拼接 1，基本拼接 1） 水平方向的拼接 2）垂直方向的拼接 3&#xf…
阅读更多...
shell脚本-函数

shell脚本-函数

文章目录 一、函数介绍什么是函数、为什么使用函数、如何使用函数 二、shell脚本中如何定义函数Way1Way2Way3 三、shell脚本中如何调用函数四、shell脚本中使用内置变量(1、#、?、2等等)五、函数的返回值、shell脚本中函数的返回值函数的返回值概念shell脚本中函数的返回值ret…
阅读更多...
梦金园三闯港交所上市：年营收200亿元，靠加盟模式取胜

梦金园三闯港交所上市：年营收200亿元，靠加盟模式取胜

近日，梦金园黄金珠宝集团股份有限公司（以下简称“梦金园”）向港交所递交IPO申请，中信证券为其独家保荐人。贝多财经了解到，这已经是梦金园第三次向港股发起冲击，此前曾于2023年9月、2024年4月两度递表。 继…
阅读更多...
刷题 - 图论

刷题 - 图论

1 | bfs/dfs | 网格染色 200. 岛屿数量 访问到马上就染色（将visited标为 true)auto [cur_x, cur_y] que.front(); 结构化绑定（C17）也可以不使用 visited数组，直接修改原始数组时间复杂度: O(n * m)，最多将 visited 数…
阅读更多...
Deepinteraction 深度交互:通过模态交互的3D对象检测

Deepinteraction 深度交互:通过模态交互的3D对象检测

一.前提 为什么要采用跨模态的信息融合? 点云在低分辨率下提供必要的定位和几何信息，而图像在高分辨率下提供丰富的外观信息。 -->因此必须采用跨模态的信息融合 提出的原因? 传统的融合办法可能会由于信息融合到统一表示中的不太完美而丢失很大一部分特定…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023