How do you query IndexedDB products by price range?

WHAT THIS TESTS: This question evaluates whether you treat IndexedDB as a structured database rather than a key-value dump. It checks your understanding of schema design through indexes, how ordered key ranges map to physical B-tree storage, and the tradeoffs between eager retrieval with getAll versus streaming with cursors. At a senior level the interviewer wants to hear about transaction modes, index lifecycle during upgrades, and memory pressure on large datasets.

A GOOD ANSWER COVERS: First, create an index on the price field inside the onupgradeneeded event using objectStore.createIndex with a name like priceIdx, the keyPath price, and unique set to false. Second, open a readonly transaction on the products store and access the index via store.index. Third, define the search space with IDBKeyRange.bound(50, 100, false, false) where the booleans control whether the endpoints are included. Fourth, choose the access pattern based on result size: use index.getAll(range) when you want an array immediately and the result set is small, or use index.openCursor(range) to yield records one by one and keep memory usage flat. Fifth, note that this approach avoids a full store scan because the engine walks only the index leaf nodes that fall inside the bound.

COMMON WRONG ANSWERS: A critical red flag is iterating the entire object store with openCursor and filtering records in JavaScript, which forces a full table scan and ignores the index. Another mistake is attempting to create an index outside of onupgradeneeded, which is impossible because IndexedDB schema is version-locked. Some candidates also use IDBKeyRange.lowerBound without an upper cap, which would overfetch, or they use a readwrite transaction when readonly is sufficient, reducing concurrency. Finally, forgetting that IndexedDB returns records in index order and suggesting manual sorting shows weak API knowledge.

LIKELY FOLLOW-UPS: The interviewer may ask how to paginate results, which you can achieve by combining openCursor with advance or by using a composite key range. They might ask how to handle a missing index on a legacy client, which requires bumping the database version to trigger onupgradeneeded. Another common follow-up is sorting by price then name; you would create a compound index with keyPath set to an array like [price, name] and query the range on the first element.

ONE CONCRETE EXAMPLE: Consider a product catalog with one million items. A full store scan would deserialize every record into memory just to discard most of them. By creating a price index and running const range = IDBKeyRange.bound(50, 100); const req = store.index("priceIdx").openCursor(range); the browser reads only the B-tree pages covering that interval, perhaps five hundred records instead of one million. On a low-end mobile device, using the cursor lets you render the first screen of results immediately while the rest stream in, rather than blocking the main thread waiting for a massive array.

Source: developer.mozilla.org