我正在使用IndexedDB
,我有一个包含大约4000条记录的数据库。我试图一次加载小块记录。与您在Twitter Feed中看到的无限滚动类似的东西。我试过谷歌这个并没有找到代码示例,但遇到了高级方法。我试着用它,但仍然没有成功。浏览器一次加载所有记录。我如何制作它,所以我一次只加载少量记录?
var openRequest = indexedDB.open("USA", 1);
openRequest.onsuccess = function (e) {
var db = e.target.result;
var transaction = db.transaction(["Male"], "readonly");
var objectStore = transaction.objectStore("Male");
var cursor = objectStore.openCursor();
cursor.onsuccess = function (e) {
var res = e.target.result;
if (res) {
res.advance(25);
res.continue();
console.log(res.value);
}
}
}
答案 0 :(得分:1)
res.advance(25)将跳过25行,但仍会加载其余行。我改变了你的代码+添加了一些评论。你可能想要使用这样的东西:
var openRequest = indexedDB.open("USA", 1);
openRequest.onsuccess = function (e) {
var db = e.target.result;
var transaction = db.transaction(["Male"], "readonly");
var objectStore = transaction.objectStore("Male");
var cursor = objectStore.openCursor();
var results = null; // variable to store the results
var startIndex = 25,
maxResults = 25;
cursor.onsuccess = function (e) {
var res = e.target.result;
if (res) {
if (!results) {
results = [];
// skip rows, but only the first time
res.advance(startIndex);
} else {
results.push(res.value)
// We don't have 25 results yet, continue to load a next one
if(results.length < maxResults) {
res.continue();
}
}
}
}
transaction.oncomplete = function() {
// maxResults loaded or maybe it was the last page so it might not be full
console.log(results);
}
}
以下示例更简单,并且可以使用自动增量,但是当结果未被删除时页面仅为完整(不是完整代码,但它是关于IDBKeyRange.bound(0,25))
var cursor = objectStore.openCursor(IDBKeyRange.bound(0, 25));
var results = [];
cursor.onsuccess = function (e) {
var res = e.target.result;
if (res) {
results.push(res.value)
}
}
transaction.oncomplete = function() {
console.log(results);
}