IndexedDB 测试工具

功能完整的 IndexedDB 测试工具，支持数据库和对象存储的创建、数据的增删改查、分页和搜索功能。

数据库管理

暂无数据库，点击"创建数据库"开始使用

使用说明

功能特性

  • ✓ 创建和管理多个 IndexedDB 数据库
  • ✓ 创建和管理对象存储（表）
  • ✓ 支持 JSON 格式的复杂数据结构
  • ✓ 完整的增删改查操作
  • ✓ 实时搜索和排序功能
  • ✓ 分页显示，支持自定义每页条数
  • ✓ 响应式设计，移动端友好

使用步骤

  1. 1 点击"创建数据库"按钮创建新的 IndexedDB 数据库
  2. 2 选择数据库后，点击"创建对象存储"创建数据表
  3. 3 选择对象存储后，可以开始添加、编辑、删除数据
  4. 4 使用搜索框快速查找数据，点击列标题进行排序
  5. 5 使用分页功能浏览大量数据

技术原理与实现

IndexedDB 简介

IndexedDB 是一个运行在浏览器中的非关系型数据库，它提供了比 localStorage 更强大的数据存储能力。 支持事务、索引、大容量存储，并且是异步的，不会阻塞主线程。

核心概念

数据库 (Database)

包含多个对象存储的容器，每个数据库有唯一的名称和版本号。

对象存储 (Object Store)

类似于关系数据库中的表，用于存储 JavaScript 对象。

事务 (Transaction)

确保数据操作的原子性，所有操作要么全部成功，要么全部失败。

索引 (Index)

提供除主键外的其他查询方式，提高查询效率。

实现技术

  • 前端框架: Svelte 5 + TypeScript
  • 样式框架: Tailwind CSS 4.0
  • 数据存储: IndexedDB API + localStorage (数据库列表)
  • 响应式设计: CSS Grid + Flexbox
  • 状态管理: Svelte 响应式变量

浏览器兼容性

IndexedDB 在现代浏览器中有良好的支持，包括 Chrome 24+、Firefox 16+、Safari 10+、Edge 12+。 本工具会自动检测浏览器支持情况。