HTML5的IndexedDB怎么用？如何存储大量数据？

const DB_NAME = 'MyAppData';
const DB_VERSION = 1; // 数据库版本号，用于升级

let db;

const request = indexedDB.open(DB_NAME, DB_VERSION);

request.onerror = (event) => {
    console.error('打开数据库失败:', event.target.errorCode);
    // 实际应用中这里需要更健壮的错误处理
};

request.onsuccess = (event) => {
    db = event.target.result;
    console.log('数据库打开成功');
    // 可以在这里开始你的数据操作
};

request.onupgradeneeded = (event) => {
    // 数据库版本发生变化（或首次创建）时触发
    db = event.target.result;
    console.log('数据库升级或首次创建');

    // 创建对象存储空间 (类似表)
    // keyPath 定义主键，autoIncrement 自动递增主键
    if (!db.objectStoreNames.contains('users')) {
        const userStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
        // 为对象存储空间创建索引，用于快速查询
        userStore.createIndex('name', 'name', { unique: false });
        userStore.createIndex('email', 'email', { unique: true });
    }

    if (!db.objectStoreNames.contains('products')) {
        const productStore = db.createObjectStore('products', { keyPath: 'productId' });
        productStore.createIndex('category', 'category', { unique: false });
    }
};

// 添加数据
function addData(storeName, data) {
    const transaction = db.transaction([storeName], 'readwrite'); // 'readwrite' 或 'readonly'
    const objectStore = transaction.objectStore(storeName);
    const request = objectStore.add(data); // data 必须是JS对象

    request.onsuccess = () => {
        console.log('数据添加成功', data);
    };

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

// 示例：添加一个用户
// addData('users', { name: '张三', email: 'zhangsan@example.com', age: 30 });

// 获取数据
function getData(storeName, key) {
    const transaction = db.transaction([storeName], 'readonly');
    const objectStore = transaction.objectStore(storeName);
    const request = objectStore.get(key); // key 是主键值

    request.onsuccess = (event) => {
        console.log('获取数据成功:', event.target.result);
    };

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

// 示例：获取ID为1的用户
// getData('users', 1);

// 更新数据 (使用 put，如果主键存在则更新，不存在则添加)
function updateData(storeName, data) {
    const transaction = db.transaction([storeName], 'readwrite');
    const objectStore = transaction.objectStore(storeName);
    const request = objectStore.put(data);

    request.onsuccess = () => {
        console.log('数据更新成功', data);
    };

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

// 示例：更新ID为1的用户
// updateData('users', { id: 1, name: '张三丰', email: 'zhangsanfeng@example.com', age: 100 });

// 删除数据
function deleteData(storeName, key) {
    const transaction = db.transaction([storeName], 'readwrite');
    const objectStore = transaction.objectStore(storeName);
    const request = objectStore.delete(key);

    request.onsuccess = () => {
        console.log('数据删除成功', key);
    };

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

// 示例：删除ID为1的用户
// deleteData('users', 1);

// 遍历所有数据 (使用游标 Cursor)
function iterateData(storeName) {
    const transaction = db.transaction([storeName], 'readonly');
    const objectStore = transaction.objectStore(storeName);
    const request = objectStore.openCursor(); // 或者 objectStore.openCursor(IDBKeyRange.only('someValue'), 'next') for indexed search

    request.onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
            console.log('游标数据:', cursor.key, cursor.value);
            cursor.continue(); // 继续下一个
        } else {
            console.log('所有数据遍历完成');
        }
    };

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

// 示例：遍历所有用户
// iterateData('users');