深入理解 IndexedDB KeyPath：如何处理特殊字符属性名

// 原始数据示例，包含特殊字符的属性名
const originalItem = {
    id: 1,
    "user@email": "test@example.com", // 包含 '@'
    "order-id": "ORD-123",            // 包含 '-'
    details: {
        "item&name": "Product X"      // 嵌套属性也可能包含特殊字符
    }
};

/**
 * 数据预处理函数：将包含特殊字符的属性名转换为有效的JavaScript标识符。
 * @param {Object} item - 待处理的原始数据对象。
 * @returns {Object} 经过处理的数据对象。
 */
function preprocessItemForIndexedDB(item) {
    const processedItem = { ...item }; // 创建一个副本以避免修改原始对象

    // 处理顶层属性 "user@email"
    if (processedItem["user@email"] !== undefined) {
        processedItem.userEmail = processedItem["user@email"]; // 创建新属性
        delete processedItem["user@email"];                     // 可选：删除原始属性以避免冗余
    }

    // 处理顶层属性 "order-id"
    // 注意：连字符 '-' 在JavaScript中是运算符，不能直接用于点表示法，因此也需要转换
    if (processedItem["order-id"] !== undefined) {
        processedItem.orderId = processedItem["order-id"];
        delete processedItem["order-id"];
    }

    // 如果嵌套对象中也存在特殊字符属性名，需要递归处理或按需处理
    // 例如，如果需要索引 details.item&name，则 details 对象也需要被修改
    // 这里仅作示例，实际应用中可能需要更复杂的递归逻辑
    if (processedItem.details && processedItem.details["item&name"] !== undefined) {
        processedItem.details.itemName = processedItem.details["item&name"];
        delete processedItem.details["item&name"];
    }

    return processedItem;
}

// 经过预处理的数据，用于存储和索引
const itemToStore = preprocessItemForIndexedDB(originalItem);

/*
itemToStore 现在可能看起来像这样（假设所有特殊字符属性都被处理）：
{
    id: 1,
    details: { itemName: "Product X" },
    userEmail: "test@example.com",
    orderId: "ORD-123"
}
*/

// IndexedDB 数据库操作示例
const dbName = "MyAppData";
const dbVersion = 1;
let db;

const request = indexedDB.open(dbName, dbVersion);

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

request.onupgradeneeded = (event) => {
    db = event.target.result;
    console.log("数据库升级或创建...");

    if (!db.objectStoreNames.contains("users")) {
        const objectStore = db.createObjectStore("users", { keyPath: "id" });

        // 使用预处理后的属性名创建索引
        objectStore.createIndex("emailIndex", "userEmail", { unique: true });
        objectStore.createIndex("orderIdIndex", "orderId", { unique: false });
        objectStore.createIndex("itemNameIndex", "details.itemName", { unique: false }); // 索引嵌套属性

        // 尝试使用包含特殊字符的keyPath创建索引会导致错误或无法工作
        // objectStore.createIndex("invalidEmailIndex", "user@email", { unique: true }); // 这会报错
        // objectStore.createIndex("invalidOrderIdIndex", "order-id", { unique: false }); // 这也会报错

        console.log("对象存储和索引创建成功.");
    }
};

request.onsuccess = (event) => {
    db = event.target.result;
    console.log("IndexedDB 数据库打开成功.");

    // 示例：将预处理后的数据存入数据库
    const transaction = db.transaction(["users"], "readwrite");
    const objectStore = transaction.objectStore("users");

    const addRequest = objectStore.add(itemToStore);

    addRequest.onsuccess = () => {
        console.log("数据成功添加到 'users' 存储:", itemToStore);
    };

    addRequest.onerror = (e) => {
        console.error("数据添加失败:", e.target.error);
    };

    transaction.oncomplete = () => {
        console.log("事务完成.");
        // 在此处可以执行查询操作，使用 'userEmail' 或 'orderId' 索引
        // 例如：
        // const getRequest = objectStore.index("emailIndex").get("test@example.com");
        // getRequest.onsuccess = (event) => console.log("通过索引查询到:", event.target.result);
    };
};