web客户端存储，IndexDB相关讲解

IndexDB详细讲解

IndexedDB 是浏览器提供的一种底层 API，用于在客户端存储大量结构化数据。相比 Web Storage（localStorage/sessionStorage），它支持更复杂的数据结构、事务处理、索引查询等高级功能。以下是一个系统化的讲解：

一、核心概念

1、​数据库（Database）​

• 每个源（origin）可以创建多个数据库
• 数据库有版本号，结构变化时需要升级版本

2、​对象存储（Object Store）​

• 类似 SQL 的表，存储键值对
• 可以定义主键（keyPath）或使用自动生成的键

3、​索引（Index）​

• 基于对象存储的字段创建索引，加速查询
• 可以创建多个索引，支持复合索引

4、​事务（Transaction）​

• 所有操作必须在事务中进行
• 三种模式：readonly、readwrite、versionchange

5、​游标（Cursor）​

• 用于遍历对象存储或索引中的记录

6、​请求与事件

• 异步 API，基于事件和请求响应模型

二、基本操作流程

1、打开/创建数据库

在 IndexedDB 中，打开或创建数据库是使用 indexedDB.open() 方法的入口操作。这个过程涉及版本控制、结构初始化、错误处理等关键环节。实例代码如下：

const request = indexedDB.open('myDB', 3); // 名称 + 版本号
request.onupgradeneeded = (event) => {
   
  // 数据库升级时触发（新建或版本号变化）
  const db = event.target.result;
  // 创建对象存储（如果不存在）
  if (!db.objectStoreNames.contains('users')) {
   
    const store = db.createObjectStore('users', {
   
      keyPath: 'id',         // 主键字段
      autoIncrement: true    // 自动生成主键
    });
    // 创建索引
    store.createIndex('age_idx'