indexDB vue 批量创建表 和 批量插入数据

// 打开或创建数据库
const request = indexedDB.open('myDatabase');

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

// 数据库版本变化时创建表
request.onupgradeneeded = event => {
  for (let i = 1; i <= 100; i++) {
    const db = event.target.result;
    db.createObjectStore(`table-${i}`);
  }
};

// 打开数据库成功后循环下载数据并存储
request.onsuccess = event => {
  for (let i = 1; i <= 100; i++) {
    const url = `http://example.com/data-${i}.json`;
    fetch(url)
      .then(response => response.json())
      .then(data => {
        console.log(`第 ${i} 个数据：`, data);
        // 将数据存入 IndexedDB
        const db = event.target.result;
        const transaction = db.transaction([`table-${i}`], 'readwrite');
        const objectStore = transaction.objectStore(`table-${i}`);

        const request = objectStore.put(data,`table-${i}`);
        
        request.onsuccess = () => {
          console.log(`数据已存储到表 ${i}`);
        };
        
        request.onerror = () => {
          console.error(`存储数据到表 ${i} 失败`);
        };
      })
      .catch(error => {
        console.error(`下载第 ${i} 个数据失败：`, error);
      });
  }
};

1 如果你不知道数据库的版本号，可以省略第二个参数，这样 indexedDB 会默认为你打开最新版本的数据库，因为版本号总是自增长的

const request = indexedDB.open('myDatabase', 1);

2 objectStore.add() 和 objectStore.put()

objectStore.add() 和 objectStore.put() 方法的参数类型都是任意类型，可以是简单类型（如字符串、数字等），也可以是对象、数组等复杂类型。它们的主要区别在于对于已存在的数据的处理方式。

• 对于 objectStore.add() 方法，如果尝试添加一个主键值已经存在的数据，将会抛出一个 ConstraintError 错误，表示数据添加失败。
• 对于 objectStore.put() 方法，如果尝试添加一个主键值已经存在的数据，则会直接更新这条数据。

因此，如果你希望同一个主键值能够对应多条数据，那么可以使用 objectStore.add() 方法；如果你希望同一个主键值只对应一条数据，那么可以使用 objectStore.put() 方法。