HTML5 IndexedDB：客户端大规模数据存储与管理完整指南

文章目录

• HTML5 IndexedDB：客户端大规模数据存储与管理完整指南
  • 概述
  • 核心概念解析
    • 1. 数据库架构
    • 2. 核心组件说明
  • 完整使用指南
    • 1. 数据库初始化与升级
    • 2. CRUD操作完整实现
    • 3. 高级查询操作
    • 4. 事务管理最佳实践
  • 最佳实践指南
    • 1. 数据库版本管理策略
    • 2. 错误处理与重试机制
    • 3. 性能优化技巧
  • 注意事项与陷阱规避
    • 1. 事务生命周期管理
    • 2. 内存泄漏预防
  • 完整示例应用
  • 总结
    • IndexedDB核心优势
    • 适用场景
    • 技术选型考虑

HTML5 IndexedDB：客户端大规模数据存储与管理完整指南

概述

IndexedDB是HTML5提供的一种底层API，用于在客户端存储大量结构化数据。它提供了比Web Storage更强大的查询能力和事务支持，是现代Web应用中处理离线数据和复杂数据结构的首选方案。

核心概念解析

1. 数据库架构

// 数据库结构示例
{
   
   
    name: "MyDatabase",      // 数据库名称
    version: 1,              // 版本号
    objectStores: [          // 对象存储空间（类似表）
        {
   
   
            name: "users",   // 存储空间名称
            keyPath: "id",   // 主键路径
            autoIncrement: true,
            indexes: [       // 索引数组
                {
   
   
                    name: "email",
                    keyPath: "email",
                    unique: true
                }
            ]
        }
    ]
}

2. 核心组件说明

组件	作用	类比关系
Database	顶层容器	数据库
Object Store	数据存储空间	数据表
Index	加速查询的索引	数据库索引
Transaction	事务操作单元	数据库事务
Cursor	数据遍历指针	游标

完整使用指南

1. 数据库初始化与升级

class IndexedDBManager {
   
   
    constructor(dbName, version = 1) {
   
   
        this.dbName = dbName;
        this.version = version;
        this.db = null;
    }

    // 打开或创建数据库
    async open() {
   
   
        return new Promise((resolve, reject) => {
   
   
            const request = indexedDB.open(this.dbName, this.version);
            
            request.onerror = () => reject(request.error);
            request.onsuccess = () => {
   
   
                this.db = request.result;
                resolve(this.db);
            };
            
            // 数据库升级（创建或修改结构）
            request.onupgradeneeded = (event) => {
   
   
                const db = event.target.result;
                this.handleUpgrade(db, event.oldVersion);
            };
        });
    }

    // 处理数据库结构升级
    handleUpgrade(db, oldVersion) {
   
   
        // 从版本0升级到版本1
        if (oldVersion < 1) {
   
   
            // 创建用户存储空间
            const userStore = db.createObjectStore('users', {
   
   
                keyPath: 'id',
                autoIncrement: true
            });
            
            // 创建索引
            userStore.createIndex('email', 'email', {
   
    unique: true });
            userStore.createIndex('name', 'name', {
   
    unique: false });
            userStore.createIndex('createdAt', 'createdAt', {
   
    unique: false });
        }
        
        // 从版本1升级到版本2
        if (oldVersion < 2) {
   
   
            const transaction = event.currentTarget.transaction;
            const userStore = transaction.objectStore('users');
            
            // 添加新索引
            userStore.createIndex('age', 'age', {
   
    unique: false });
        }
    }
}

2. CRUD操作完整实现

class UserRepository {
   
   
    constructor(dbManager) {
   
   
        this.dbManager = dbManager;
    }

    // 添加用户
    async addUser(user) {
   
   
        const transaction = this.dbManager.db.transaction(['users'], 'readwrite');
        const store = transaction.objectStore('users');
        
        // 添加创建时间戳
        const userWithTimestamp = {
   
   
            ...user,
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString()
        };
        
        return new Promise((resolve, reject) => {
   
   
            const request = store.add(userWithTimestamp);
            
            request.onsuccess = () => resolve(request.result);
            request.onerror = () => reject(request.error);
        });
    }

    // 获取用户
    async getUser(id) {
   
   
        const transaction = this.dbManager.db.transaction(['users'], 'readonly');
        const store = transaction.objectStore('users');
        
        return new Promise((resolve, reject) => {
   
   
            const request = store.get(id);
            
            request.onsuccess = () => resolve(request.result);
            request.onerror = () => reject(request.error);
        });
    }

    // 更新用户
    async updateUser(id, updates) {
   
   
        const transaction = this.dbManager.db.transaction(['users'], 'readwrite');
        const store = transaction.objectStore('users');
        
        return new Promise(async (resolve, reject) => {
   
   
            // 先获取现有数据
            const getRequest = store.get(id);
            
            getRequest.onsuccess = () => {
   
   
                const user = getRequest.result;
                if (!user) {
   
   
                    reject(new Error('User not found'));
                    return;
                }
                
                // 合并更新
                const updatedUser = {
   
   
                    ...user,
                    ...updates,
                    updatedAt: new Date().toISOString()
                };
                
                // 执行更新
                const putRequest = store.put(updatedUser);
                putRequest.onsuccess = () => resolve(updatedUser);
                putRequest.onerror = () => reject(putRequest.error);
            };
            
            getRequest.onerror = () => reject