Chrome Indexdb -使用IDBKeyRange.bound()按日期查询没有结果

enyaitl3  于 2023-04-27  发布在  Go
关注(0)|答案(1)|浏览(115)

使用indexdb,我试图按日期查询。我有一个date索引。当我查询时,没有结果返回。我确信我做错了什么,但现在确定什么。同样奇怪的是,我没有在API中指定键。

try {
      let store = await db.transaction('transactions').objectStore('transactions');
      const fromDate = '2021-12-01';
      const toDate = '2023-04-22';
      const dateRange = IDBKeyRange.bound(fromDate, toDate);
      const cursor = await store.openCursor(dateRange);
      while (cursor) {
        console.log(cursor.key, cursor.value);
        cursor = await cursor.continue();
      }
    } catch (e) {
      console.log(e);
    }
djp7away

djp7away1#

错误的部分是当迭代cursor变量时。

...
const cursor = await store.openCursor(dateRange);
while (cursor) {
  console.log(cursor.key, cursor.value);
  cursor = await cursor.continue();
}
...

基于the documentation,而不是使用while循环,你可以像这样在openCursor().onsuccess中使用callback迭代结果:

store.index('date').openCursor(dateRange).onsuccess = (event) => {
  let cursor = event.target.result;
  if (cursor) {
    console.log(cursor.key, cursor.value);
    cursor.continue();
  }
}

完整代码:

let request = indexedDB.open('testDB', 1);

let transactions = [
  { id: 0, date: '2021-12-01', amount: 10 },
  { id: 1, date: '2022-01-15', amount: 20 },
  { id: 2, date: '2022-03-20', amount: 30 },
  { id: 3, date: '2023-01-01', amount: 40 },
  { id: 4, date: '2023-04-22', amount: 50 },
  { id: 5, date: '2023-05-21', amount: 60 },
  { id: 6, date: '2024-02-11', amount: 70 },
  { id: 7, date: '2024-03-23', amount: 80 },
  { id: 8, date: '2024-09-10', amount: 90 },
  { id: 9, date: '2025-01-05', amount: 100 }
];

request.onupgradeneeded = function (event) {
  let db = event.target.result;
  let store = db.createObjectStore('transactions', { keyPath: 'id' });
  store.createIndex('date', 'date');

  for (let transaction of transactions) {
    store.add(transaction);
  }
}

request.onsuccess = function (event) {
  (async () => {
    try {
      let db = event.target.result;
      let store = await db.transaction('transactions').objectStore('transactions');
      const fromDate = '2021-12-01';
      const toDate = '2023-04-22';
      const dateRange = IDBKeyRange.bound(fromDate, toDate);
      store.index('date').openCursor(dateRange).onsuccess = (event) => {
        let cursor = event.target.result;
        if (cursor) {
          console.log(cursor.key, cursor.value);
          cursor.continue();
        }
      }
    } catch (e) {
      console.log(e);
    }
  })();
}

编辑:使用jakearchibald/idb

let transactions = [
  { id: 0, date: '2021-12-01', amount: 10 },
  { id: 1, date: '2022-01-15', amount: 20 },
  { id: 2, date: '2022-03-20', amount: 30 },
  { id: 3, date: '2023-01-01', amount: 40 },
  { id: 4, date: '2023-04-22', amount: 50 },
  { id: 5, date: '2023-05-21', amount: 60 },
  { id: 6, date: '2024-02-11', amount: 70 },
  { id: 7, date: '2024-03-23', amount: 80 },
  { id: 8, date: '2024-09-10', amount: 90 },
  { id: 9, date: '2025-01-05', amount: 100 }
];

(async () => {
  try {
    const db = await idb.openDB('testDB', 1, {
      upgrade(db) {
        const store = db.createObjectStore('transactions', { keyPath: 'id' });
        store.createIndex('date', 'date');

        for (let transaction of transactions) {
          store.add(transaction);
        }
      }
    });

    const fromDate = '2021-12-01';
    const toDate = '2023-04-22';
    const dateRange = IDBKeyRange.bound(fromDate, toDate);

    const store = db.transaction('transactions').objectStore('transactions');
    const index = store.index('date');
    const rangeRequest = await index.openCursor(dateRange);

    for await (const cursor of rangeRequest) {
      console.log(cursor.key, cursor.value);
    }
    
  } catch (e) {
    console.log(e);
  }
})();
<script src="https://cdn.jsdelivr.net/npm/idb@7/build/umd-with-async-ittr.js"></script>

工作提琴:https://playcode.io/1449292

相关问题