深入理解IndexedDB keyPath：特殊字符限制与数据处理策略

const data = {
  id: 123,
  name: {
    full: "Alice Aardvark",
    nick: "ardy"
  },
  "text@": "some text with special char key"
};

// 假设 db 已经打开，objectStore 已经创建
// const objectStore = db.createObjectStore("myStore", { keyPath: "title@" }); // 这会失败
// const index = objectStore.createIndex("myIndex", "text@"); // 这也会失败

// 原始数据对象
const originalData = {
  id: 1,
  title: "Example Item",
  "text@": "This is some text with a special character key."
};

// 步骤1：数据预处理
function prepareDataForIndexedDB(data) {
  const processedData = { ...data }; // 创建一个副本以避免修改原始对象
  if (processedData["text@"] !== undefined) {
    processedData.indexedText = processedData["text@"]; // 将其映射到合法标识符
    delete processedData["text@"]; // 可选：删除原始属性以避免冗余存储
  }
  return processedData;
}

const dataToStore = prepareDataForIndexedDB(originalData);
console.log(dataToStore);
// 输出: { id: 1, title: "Example Item", indexedText: "This is some text with a special character key." }

// 步骤2：创建ObjectStore和Index
// 假设 db 是一个已打开的IndexedDB数据库实例
const dbRequest = indexedDB.open("MyDatabase", 1);

dbRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  if (!db.objectStoreNames.contains("myStore")) {
    const objectStore = db.createObjectStore("myStore", { keyPath: "id" });
    // 现在我们可以使用 "indexedText" 作为 keyPath
    objectStore.createIndex("indexedTextIndex", "indexedText", { unique: false });
    console.log("ObjectStore and Index created.");
  }
};

dbRequest.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction(["myStore"], "readwrite");
  const objectStore = transaction.objectStore("myStore");

  // 步骤3：存储处理后的数据
  const addRequest = objectStore.add(dataToStore);

  addRequest.onsuccess = () => {
    console.log("Data added successfully:", dataToStore);
  };

  addRequest.onerror = (error) => {
    console.error("Error adding data:", error);
  };

  transaction.oncomplete = () => {
    console.log("Transaction completed.");
    db.close();
  };
};

dbRequest.onerror = (event) => {
  console.error("Database error:", event.target.errorCode);
};