前端数据库indexDB

简单介绍下应用场景：

一、大规模数据存储与缓存

‌电商场景‌：存储商品目录、用户购物车及订单历史，减少服务器压力并提升加载速度‌。
‌新闻/阅读类应用‌：缓存文章内容及用户阅读记录，实现离线访问‌。
‌数据可视化工具‌：本地处理海量数据，支持离线分析并延迟同步至服务器‌。

二、用户生成内容管理

‌实时保存草稿‌：适用于在线文档、图片编辑器等场景，确保编辑过程中数据自动持久化‌。
‌游戏与教育应用‌：存储用户游戏进度、成就或学习记录，实现跨会话数据保留‌。

indexDB的基础应用：

一、核心概念与架构

‌数据库（Database） ‌
- 每个源（域名）可创建多个数据库，但通常一个应用使用一个数据库。
- 数据库通过名称和版本号唯一标识，版本升级需显式处理。
‌对象存储（Object Store） ‌
- 类似数据库的"表"，存储键值对数据。
- 每个对象存储需定义主键（keyPath），支持自动生成主键（autoIncrement）。
- 可创建多个索引（Index），用于快速查询非主键字段。
‌事务（Transaction） ‌
- 所有数据操作必须在事务中完成，确保原子性。
- 事务模式：
  - readonly：只读，性能最佳。
  - readwrite：读写，可能触发版本升级。
  - versionchange：数据库结构变更（如创建/删除对象存储）。
‌游标（Cursor） ‌
- 用于遍历对象存储或索引中的数据，支持范围查询和条件过滤。

二、操作流程详解

1. 打开/创建数据库

ini 复制代码

const request = indexedDB.open('myDatabase', 2); // 名称 + 版本

request.onerror = (event) => {
  console.error('数据库打开失败:', event.target.error);
};

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log('数据库已打开:', db.name);
};

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  if (!db.objectStoreNames.contains('users')) {
    const store = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
    store.createIndex('nameIndex', 'name', { unique: false });
    store.createIndex('emailIndex', 'email', { unique: true });
  }
};

‌版本管理 ‌：每次结构变更（如新增对象存储）需升级版本，onupgradeneeded是唯一可修改结构的地方。
‌错误处理 ‌：监听onerror事件处理数据库操作中的异常。

2. 数据操作（CRUD）

‌添加数据

ini 复制代码

const transaction = db.transaction('users', 'readwrite');
const store = transaction.objectStore('users');
const request = store.add({ name: 'Alice', email: '[email protected]' });

request.onsuccess = () => console.log('数据添加成功');
request.onerror = (e) => console.error('添加失败:', e.target.error);

‌读取数据

ini 复制代码

const transaction = db.transaction('users', 'readonly');
const store = transaction.objectStore('users');
const request = store.get(1); // 主键查询

request.onsuccess = (e) => {
  const data = e.target.result;
  console.log('获取数据:', data);
};

‌更新数据

php 复制代码

const request = store.put({ id: 1, name: 'Alice Updated', email: '[email protected]' });

‌删除数据

go 复制代码

const request = store.delete(1); // 按主键删除

‌使用索引查询

ini 复制代码

const index = store.index('nameIndex');
const request = index.get('Alice');

三、事务与并发控制

‌事务生命周期 ‌：事务在回调函数执行完毕后自动提交，或手动调用transaction.commit()。
‌并发冲突‌：若两个事务同时修改同一数据，后提交的事务可能失败，需通过重试或版本管理解决。
‌事务模式选择 ‌：优先使用readonly提升性能，必要时用readwrite。

五、实际应用场景与示例

‌场景1：离线应用缓存‌

使用Service Worker拦截网络请求，优先从IndexedDB读取缓存数据。
示例代码：

javascript 复制代码

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request).then((res) => {
        // 将响应数据存入IndexedDB
        return res;
      });
    })
  );
});

‌场景2：大文件存储‌

存储用户上传的图片或文档（Blob类型）。
示例：

ini 复制代码

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files;
  const transaction = db.transaction('files', 'readwrite');
  const store = transaction.objectStore('files');
  store.add(file, file.name); // 使用文件名作为主键
});

六、对比其他存储方案

‌特性‌	IndexedDB	LocalStorage	Web SQL (已废弃)	Cookies
‌存储容量‌	≥250MB（浏览器策略限制）	~5MB	~5MB	~4KB
‌数据格式‌	结构化对象/Blob	字符串	关系型表格	字符串
‌查询能力‌	索引、游标、范围查询	无	SQL查询	无
‌异步支持‌	是	否（同步阻塞）	是	否
‌适用场景‌	大规模数据、复杂查询	简单配置/状态存储	小型结构化数据（历史）	会话/身份标识

总结：

IndexedDB 是浏览器提供的 ‌客户端 NoSQL 数据库‌，支持存储大规模结构化数据（如 JSON、Blob），通过异步事务操作和索引查询实现高效数据管理，适用于离线应用、大文件缓存等场景，提供远超 LocalStorage 的存储容量（GB 级）和复杂检索能力，是前端处理高性能、持久化数据的核心方案。