浏览器存储 IndexedDB

IndexedDB

1. 什么是 IndexedDB？

IndexedDB 是一种 基于浏览器的 NoSQL 数据库，用于存储大量的结构化数据，包括文件和二进制数据。它比 localStorage 和 sessionStorage 更强大，支持索引查询、事务等特性。

IndexedDB 主要特点

  • 持久存储：数据存储在用户设备上，刷新页面不会丢失。
  • 键值对存储：数据存储在对象存储（Object Store）中，使用键值对（Key-Value）方式存取。
  • 异步 API：IndexedDB 使用 异步操作，不会阻塞主线程。
  • 事务管理：支持事务，保证数据一致性。
  • 索引支持：允许创建索引，加快查询速度。
  • 可存储大数据：可以存储比 localStorage 多得多的数据，可以存储结构化克隆算法支持的任何对象，文件/二进制大型对象（blobs）。

2. IndexedDB 核心 API

2.1 数据库管理（Database Management）

IndexedDB 允许创建、打开、升级和删除数据库。
获取所有数据库列表
在这里插入图片描述
删除指定数据库
在这里插入图片描述

打开或创建数据库
const request = indexedDB.open("MyDatabase", 1);
  • MyDatabase：数据库名称。
  • 1：数据库版本号（升级数据库时需要增加版本号）。
    在这里插入图片描述
数据库打开成功事件
request.onsuccess = function(event) {const db = event.target.result;console.log("数据库打开成功", db);
};
数据库升级（创建表）
request.onupgradeneeded = function(event) {const db = event.target.result;if (!db.objectStoreNames.contains("users")) {db.createObjectStore("users", { keyPath: "id", autoIncrement: true });}
};
//改事件会在数据库第一次创建以及版本号变更时触发.并且版本号只能递增只能说整数.
  • keyPath: "id"：指定主键。名字随便
  • autoIncrement: true：自动递增 ID。
数据库打开失败事件
request.onerror = function(event) {console.error("数据库打开失败", event.target.errorCode);
};
删除数据库
indexedDB.deleteDatabase("MyDatabase").onsuccess = function() {console.log("数据库删除成功");
};

注意事项：

  • 数据库的版本号只能 递增，不能降级。
  • 不能在 onsuccess 事件中直接修改数据库结构，需要在 onupgradeneeded 事件中完成。

2.2 事务管理（Transactions）

所有数据库操作必须在 事务 中完成。

const transaction = db.transaction(["users"], "readwrite");
const store = transaction.objectStore("users");
  • "readonly"：只读事务。
  • "readwrite"：可读写事务。
  • "versionchange"：用于数据库升级。

事务事件监听

transaction.oncomplete = function() {console.log("事务完成");
};
transaction.onerror = function() {console.log("事务出错", transaction.error);
};
transaction.onabort = function() {console.log("事务被中止");
};

注意事项：

  • 事务默认是 自动提交 的，一旦事务完成，不能再操作它。
  • 如果某个操作失败，整个事务都会回滚。

2.3 对象存储（Object Store）

IndexedDB 的数据存储在 对象存储（Object Store） 中，类似于数据库中的表。

添加数据
store.add({ id: 1, name: "Alice", age: 25 });
更新数据
store.put({ id: 1, name: "Alice", age: 26 });
获取数据
const request = store.get(1);
request.onsuccess = function() {console.log("用户数据：", request.result);
};
获取所有数据
const allRequest = store.getAll();
allRequest.onsuccess = function() {console.log("所有用户数据：", allRequest.result);
};
删除数据
store.delete(1);
清空表数据
store.clear();

2.4 索引（Indexes）

索引用于提高查询性能。

创建索引
store.createIndex("nameIndex", "name", { unique: false });
通过索引查询数据
const index = store.index("nameIndex");
const request = index.get("Alice");
request.onsuccess = function() {console.log("查询结果：", request.result);
};

注意事项：

  • unique: true 表示索引字段值不能重复。

2.5 游标（Cursors）

用于遍历数据。

const cursorRequest = store.openCursor();
//openCursor()接受两个可选参数
//要查询的键或者 IDBKeyRange 。如果传一个有效的键，则会默认为只包含此键的范围。如果此参数不传值，则默认为一个选择了该对象存储空间全部记录的键范围。
//direction  IDBCursorDirection 来告诉游标要移动的方向。
//有效的值有 "next" 、"nextunique" 、"prev" 和 "prevunique"。默认值是 "next"。
cursorRequest.onsuccess = function(event) {const cursor = event.target.result;if (cursor) {console.log("遍历数据：", cursor.value);cursor.continue();}
};

在这里插入图片描述

let keyRangeValue = IDBKeyRange.bound(2,6);store.openCursor(keyRangeValue)//查询id 2~6的

在这里插入图片描述

在这里插入图片描述

// 倒着查询
let keyRangeValue = IDBKeyRange.upperBound(5);
store.openCursor(keyRangeValue,'prev')

在这里插入图片描述

查询条件代码
所有键 ≤ xIDBKeyRange.upperBound(x)
所有键 < xIDBKeyRange.upperBound(x, true)
所有键 ≥ yIDBKeyRange.lowerBound(y)
所有键 > yIDBKeyRange.lowerBound(y, true)
所有键 ≥ x 且 ≤ yIDBKeyRange.bound(x, y)
所有键 > x 且 < yIDBKeyRange.bound(x, y, true, true)
所有键 > x 且 ≤ yIDBKeyRange.bound(x, y, true, false)
所有键 ≥ x 且 < yIDBKeyRange.bound(x, y, false, true)
键值等于 zIDBKeyRange.only(z)

注意事项：

  • cursor.continue() 让游标指向下一个数据。
  • cursor.delete() 可删除当前项。

3. IndexedDB 完整示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>IndexedDB 示例</title>
</head><body><script>let arr = Array(10).fill(0).map((_, i) => ({ id: i, name: `用户${i}`, age: 20 + i }));const request = indexedDB.open("demo", 1);let db;request.onupgradeneeded = function (e) {db = e.target.result;console.log("数据库升级:", db);if (!db.objectStoreNames.contains("users")) {db.createObjectStore("users", { keyPath: "id", autoIncrement: true });console.log("对象存储 'users' 创建成功");}};request.onsuccess = function (e) {db = e.target.result;const transaction = db.transaction("users", "readwrite");const store = transaction.objectStore("users");arr.forEach(item => {store.add(item);});store.getAll().onsuccess = function (e) {console.log("所有数据:", e.target.result);};var keyRangeValue = IDBKeyRange.upperBound(5);store.openCursor(keyRangeValue, 'prev').onsuccess = function (e) {const cursor = e.target.result;if (cursor) {console.log("游标数据:", cursor.value);cursor.continue();}};};request.onerror = function (e) {console.error("数据库打开失败", e.target.error);};request.onblocked = function () {console.warn("数据库升级被阻塞，请关闭其他页面");};</script>
</body></html>

IndexedDB 提供了一系列 API 来管理数据库、存储对象和执行事务，以下是 IndexedDB 的所有主要 API，按照功能分类列出：

1. 数据库管理（Database Management）

这些 API 负责打开、创建和删除数据库：

API作用
indexedDB.open(name, version)打开数据库，如果不存在则创建
indexedDB.deleteDatabase(name)删除数据库
indexedDB.databases()获取所有已创建的数据库（仅部分浏览器支持）
IDBOpenDBRequest.onsuccess数据库打开成功的事件
IDBOpenDBRequest.onerror数据库打开失败的事件
IDBOpenDBRequest.onupgradeneeded数据库版本变更时触发（用于初始化或升级数据库）

2. 事务（Transactions）

IndexedDB 使用事务来确保数据一致性：

API作用
db.transaction(storeNames, mode)创建事务，mode 可以是 "readonly" 或 "readwrite"
IDBTransaction.objectStore(name)获取对象存储（表）
IDBTransaction.oncomplete事务成功完成时触发
IDBTransaction.onerror事务出错时触发
IDBTransaction.onabort事务被中止时触发

3. 对象存储（Object Store）

IndexedDB 中的数据存储在对象存储（类似数据库中的表）中：

API作用
db.createObjectStore(name, options)创建对象存储，options 可设置 keyPath
IDBDatabase.deleteObjectStore(name)删除对象存储
IDBObjectStore.add(value, key?)添加数据（如果 keyPath 没有设置 key，可以传 key）
IDBObjectStore.put(value, key?)更新数据（如果 key 已存在）
IDBObjectStore.get(key)获取指定 key 的数据
IDBObjectStore.getAll()获取所有数据（部分浏览器不支持）
IDBObjectStore.getAllKeys()获取所有 key（部分浏览器不支持）
IDBObjectStore.delete(key)删除指定 key 的数据
IDBObjectStore.clear()清空整个对象存储
IDBObjectStore.createIndex(name, keyPath, options)创建索引
IDBObjectStore.index(name)获取索引

4. 索引（Indexes）

索引用于加速查询：

API作用
IDBIndex.get(key)通过索引查找数据
IDBIndex.getAll()获取所有索引匹配的数据
IDBIndex.getAllKeys()获取所有索引的 key
IDBIndex.count()统计匹配索引的数据条数
IDBIndex.openCursor()通过索引游标遍历数据

5. 游标（Cursors）

游标用于遍历大数据集：

API作用
IDBObjectStore.openCursor()遍历对象存储
IDBIndex.openCursor()通过索引遍历数据
IDBCursor.continue()继续下一个数据项
IDBCursor.advance(n)跳过 n 个数据项
IDBCursor.delete()删除当前游标指向的数据
IDBCursor.update(value)更新当前游标指向的数据

6. 事件（Events）

IndexedDB 主要是基于事件的，以下是常见事件：

事件触发时机
onupgradeneeded数据库版本更新时
onsuccess操作成功时
onerror操作失败时
oncomplete事务完成时
onabort事务中止时

7. 其他 API

一些辅助 API：

API作用
IDBFactory.cmp(key1, key2)比较两个键的大小
IDBObjectStore.count()统计对象存储中的数据条数

总结

IndexedDB 提供了一整套 API 来管理数据库、对象存储、索引和事务，核心 API 主要包括：

  1. 数据库管理：indexedDB.open()、indexedDB.deleteDatabase()
  2. 事务：transaction()、objectStore()
  3. 对象存储操作：add()、put()、get()、delete()
  4. 索引：createIndex()、get()、openCursor()
  5. 游标：openCursor()、continue()、advance()
  6. 事件：onsuccess、onerror、onupgradeneeded

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

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

相关文章

panda3d 渲染

panda3d 渲染

目录 安装 设置渲染宽高&#xff1a; 渲染3d 安装 pip install Panda3D 设置渲染宽高&#xff1a; import panda3d.core as pdmargin 100 screen Tk().winfo_screenwidth() - margin, Tk().winfo_screenheight() - margin width, height (screen[0], int(screen[0] / 1…
阅读更多...
Node.js 包管理工具 - NPM 与 PNPM 清理缓存

Node.js 包管理工具 - NPM 与 PNPM 清理缓存

NPM 清理缓存 1、基本介绍 npm 缓存是 npm 用来存储已下载包的地方&#xff0c;以加快后续安装速度 但是&#xff0c;有时缓存可能会损坏或占用过多磁盘空间&#xff0c;这时可以清理 npm 缓存 2、清理操作 执行如下指令&#xff0c;清理 npm 缓存 npm cache clean --for…
阅读更多...
STM32F103_LL库+寄存器学习笔记05 - GPIO输入模式，捕获上升沿进入中断回调

STM32F103_LL库+寄存器学习笔记05 - GPIO输入模式，捕获上升沿进入中断回调

导言 GPIO设置输入模式后&#xff0c;一般会用轮询的方式去查看GPIO的电平状态。比如&#xff0c;最常用的案例是用于检测按钮的当前状态&#xff08;是按下还是没按下&#xff09;。中断的使用一般用于计算脉冲的频率与计算脉冲的数量。 项目地址&#xff1a;https://github.…
阅读更多...
【C++进阶二】string的模拟实现

【C++进阶二】string的模拟实现

【C进阶二】string的模拟实现 1.构造函数和C_strC_str: 2.operator[]3.拷贝构造3.1浅拷贝3.2深拷贝 4.赋值5.迭代器6.比较ascll码值的大小7.reverse扩容8.push_back尾插和append尾插9.10.insert10.1在pos位置前插入字符ch10.2在pos位置前插入字符串str 11.resize12.erase12.1从…
阅读更多...
wokwi arduino mega 2560 - 点亮LED案例

wokwi arduino mega 2560 - 点亮LED案例

截图&#xff1a; 点亮LED案例仿真截图 代码&#xff1a; unsigned long t[20]; // 定义一个数组t&#xff0c;用于存储20个LED的上次状态切换时间&#xff08;单位&#xff1a;毫秒&#xff09;void setup() {pinMode(13, OUTPUT); // 将引脚13设置为输出模式&#xff08;此…
阅读更多...
vue3项目使用 python +flask 打包成桌面应用

vue3项目使用 python +flask 打包成桌面应用

server.py import os import sys from flask import Flask, send_from_directory# 获取静态文件路径 if getattr(sys, "frozen", False):# 如果是打包后的可执行文件base_dir sys._MEIPASS else:# 如果是开发环境base_dir os.path.dirname(os.path.abspath(__file…
阅读更多...
后端学习day1-Spring(八股）--还剩9个没看

后端学习day1-Spring(八股）--还剩9个没看

一、Spring 1.请你说说Spring的核心是什么 参考答案 Spring框架包含众多模块&#xff0c;如Core、Testing、Data Access、Web Servlet等&#xff0c;其中Core是整个Spring框架的核心模块。Core模块提供了IoC容器、AOP功能、数据绑定、类型转换等一系列的基础功能&#xff0c;…
阅读更多...
LeetCode 第34、35题

LeetCode 第34、35题

LeetCode 第34题&#xff1a;在排序数组中查找元素的第一个和最后一个位置 题目描述 给你一个按照非递减顺序排列的整数数组nums&#xff0c;和一个目标值target。请你找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值target&#xff0c;返回[-1,1]。你必须…
阅读更多...
告别分库分表，时序数据库 TDengine 解锁燃气监控新可能

告别分库分表，时序数据库 TDengine 解锁燃气监控新可能

达成效果&#xff1a; 从 MySQL 迁移至 TDengine 后&#xff0c;设备数据自动分片&#xff0c;运维更简单。 列式存储可减少 50% 的存储占用&#xff0c;单服务器即可支撑全量业务。 毫秒级漏气报警响应时间控制在 500ms 以内&#xff0c;提升应急管理效率。 新架构支持未来…
阅读更多...
第十四届蓝桥杯真题

第十四届蓝桥杯真题

一.LED 先配置LED的八个引脚为GPIO_OutPut，锁存器PD2也是，然后都设置为起始高电平，生成代码时还要去解决引脚冲突问题 二.按键 按键配置，由原理图按键所对引脚要GPIO_Input 生成代码，在文件夹中添加code文件夹，code中添加fun.c、fun.h、headfile.h文件，去资源包中把lc…
阅读更多...
《基于机器学习发电数据电量预测》开题报告

《基于机器学习发电数据电量预测》开题报告

个人主页&#xff1a;大数据蟒行探索者 目录 一、选题背景、研究意义及文献综述 &#xff08;一&#xff09;选题背景 &#xff08;二&#xff09;选题意义 &#xff08;三&#xff09;文献综述 1. 国内外研究现状 2. 未来方向展望 二、研究的基本内容&#xff0c;拟解…
阅读更多...
UWP程序用多页面实现应用实例多开

UWP程序用多页面实现应用实例多开

Windows 10 IoT ARM64平台下&#xff0c;UWP应用和MFC程序不一样&#xff0c;同时只能打开一个应用实例。以串口程序为例&#xff0c;如果用户希望同时打开多个应用实例&#xff0c;一个应用实例打开串口1&#xff0c;一个应用实例打开串口2&#xff0c;那么我们可以加载多个页…
阅读更多...
Springboot整合Netty简单实现1对1聊天（vx小程序服务端）

Springboot整合Netty简单实现1对1聊天（vx小程序服务端）

本文功能实现较为简陋&#xff0c;demo内容仅供参考&#xff0c;有不足之处还请指正。 背景 一个小项目&#xff0c;用于微信小程序的服务端&#xff0c;需要实现小程序端可以和他人1对1聊天 实现功能 Websocket、心跳检测、消息持久化、离线消息存储 Netty配置类 /*** au…
阅读更多...
GitLab 中文版17.10正式发布，27项重点功能解读【二】

GitLab 中文版17.10正式发布，27项重点功能解读【二】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 官网极狐…
阅读更多...
好消息！软航文档控件(NTKO WebOffice)在Chrome 133版本上提示扩展已停用的解决方案

好消息！软航文档控件(NTKO WebOffice)在Chrome 133版本上提示扩展已停用的解决方案

软航文档控件现有版本依赖Manifest V2扩展技术支持才能正常运行&#xff0c;然而这个扩展技术到2025年6月在Chrome高版本上就彻底不支持了&#xff0c;现在Chrome 133开始的版本已经开始弹出警告&#xff0c;必须手工开启扩展支持才能正常运行。那么如何解决这个技术难题呢&…
阅读更多...
字典树与01trie

字典树与01trie

字典树简介 当我们通过字典查一个字或单词的时候&#xff0c;我们会通过前缀或关键字的来快速定位一个字的位置&#xff0c;进行快速查找。 字典树就是类似字典中索引表的一种数据结构&#xff0c;能够帮助我们快速定位一个字符串的位置。 字典树是一种存储字符串的数据结构…
阅读更多...
二十五、实战开发 uni-app x 项目（仿京东）- 前后端轮播图

二十五、实战开发 uni-app x 项目（仿京东）- 前后端轮播图

定义了一个名为 Swiper 的Java类，用于表示一个轮播图实体。它使用了 Jakarta Persistence API (JPA) 来映射数据库表，并使用了 Lombok 库来简化代码。以下是对代码的详细讲解： 1. 包声明 package com.jd.jdmall.model; 这行代码声明了该类所在的包路径为 com.jd.jdmall.mode…
阅读更多...
游戏摇杆开发：利用 Windows API 实现摇杆输入捕获

游戏摇杆开发：利用 Windows API 实现摇杆输入捕获

在现代游戏开发中&#xff0c;游戏摇杆&#xff08;Joystick&#xff09;作为一种重要的输入设备&#xff0c;能够为玩家提供更加沉浸式的游戏体验。Windows 操作系统提供了一系列 API 函数&#xff0c;允许开发者轻松地捕获和处理游戏摇杆的输入。本文将介绍如何使用 Windows …
阅读更多...
Ceph集群2025（Squid版）快速对接K8S cephFS文件存储

Ceph集群2025（Squid版）快速对接K8S cephFS文件存储

ceph的块存储太简单了。所以不做演示 查看集群 创建一个 CephFS 文件系统 # ceph fs volume create cephfs01 需要创建一个子卷# ceph fs subvolume create cephfs01 my-subvol -----------------#以下全部自动创建好 # ceph fs ls name: cephfs01, metadata pool: c…
阅读更多...
Python中数据结构元组详解

Python中数据结构元组详解

在Python中&#xff0c;元组&#xff08;Tuple&#xff09;是一种不可变的序列类型&#xff0c;常用于存储一组有序的数据。与列表&#xff08;List&#xff09;不同&#xff0c;元组一旦创建&#xff0c;其内容无法修改。本文将详细介绍元组的基本操作、常见运算、内置函数以及…
阅读更多...
最新文章

Copyright @ 2022~2023