从indexeddb分段加载数据

loading data from indexeddb in segments

本文关键字：数据 加载 分段 indexeddb      更新时间：2023-09-26

我正在与IndexedDB合作，我有一个大约4000条记录的数据库。我正在尝试一次加载一小块记录。类似于你在推特上看到的无限滚动。我试着在谷歌上搜索这个，没有找到代码示例，但遇到了先进的方法。我试着用它，但仍然没有成功。浏览器一次载入了所有的记录。我如何使它，所以我只加载少量的记录在同一时间?

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);
                }
            }
        }

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的)。绑定(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);
}
相关文章：