Jquery 使用indexedDb时页面就绪事件中出现问题

我使用indexedDB离线保存图像，我将照片保存在base64中，当用户重新打开页面时，照片将自动加载，我遇到的问题是，当我加载页面时，没有加载任何内容，但我希望能够做到这一点，但我不知道如何做到这一点。非常感谢。 代码被污染了，因为我尝试了几种方法来让它工作

$（文档）.ready（函数（）{
window.indexedDB=window.indexedDB | | window.mozIndexedDB | | window.webkitIndexedDB | | window.msIndexedDB；
var请求，db；
var vetor=[]；
如果（！window.indexedDB）{
警报（“Seu navegador não suporta o recurso IndexedDB”）；
}
否则{
请求=window.indexedDB.open（“BD Imagens”，4）；
request.onerror=函数（事件）{
控制台日志（“Erro ao abrir o banco de dados”，事件）；
}
request.onupgradeneeded=函数（事件）{
console.log（“Atualizando”）；
db=event.target.result；
var objectStore=db.createObjectStore（“imagens”，{keyPath:“codigo”}）；
};
request.onsuccess=函数（事件）{
console.log（“Banco de dados aberto com Successo”）；
db=event.target.result；
}
}
对于（变量i=0；i<5；i++）{
var transaction=db.transaction（[“imagens”]）；
var objectStore=transaction.objectStore（“imagens”）；
var request=objectStore.get（i.toString（））；
var imgtmp=新图像（）；
imgtmp.src='data:'+request.result.nome；
检查推送（imgtmp.src）；
request.onerror=函数（事件）{
警报（“erro”）；
};
request.onsuccess=函数（事件）{
var html=“”；
html+=''；
$（“#容器缩影”）.append（html）；
};
}
forEach（功能（chave）审查员{
var html=“”；
html+=''；
$（“#容器缩影”）.append（html）；
});
});
IndexedDB是异步的，而您的代码是同步的。在初始化db变量之前，您正在使用它

var db;
$(document).ready(function () {
  window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    var request, ==;
    var vetor = [];
    if (!window.indexedDB) {
        alert("Seu navegador não suporta o recurso IndexedDB");
    }
    else {
        request = window.indexedDB.open("BD-Imagens", 4);
        request.onerror = function (event) {
            console.log("Erro ao abrir o banco de dados", event);
        }

        request.onupgradeneeded = function (event) {
            console.log("Atualizando");
            db = event.target.result;
            var objectStore = db.createObjectStore("imagens", { keyPath: "codigo" });
        };
        request.onsuccess = function (event) {
            console.log("Banco de dados aberto com sucesso");
            db = event.target.result;
            getImgFromIdb();

        }

    }

});

function getImgFromIdb()
{
    for (var i = 0; i < 5; i++) {
        var transaction = db.transaction(["imagens"]);
        var objectStore = transaction.objectStore("imagens");
        var request = objectStore.get(i.toString());

        var imgtmp = new Image();
        imgtmp.src = 'data:' + request.result.nome;

        vetor.push(imgtmp.src);


        request.onerror = function (event) {
            alert("erro");
        };
        request.onsuccess = function (event) {
            var html = "";
            html += '<div class="div-miniaturas"><img class="miniaturas" src="' + imgtmp.src + '"';
            html += '></div>';
            $('#container-miniaturas').append(html);

        };

    }

    vetor.forEach(function (chave) {
        var html = "";
        html += '<div class="div-miniaturas"><img class="miniaturas" src="' + valor + '"';
        html += '></div>';
        $('#container-miniaturas').append(html);
    });

}

因此，上述代码的解决方案是，为了保持db变量的全局性，将getting Image代码放入一个函数中，并在初始化db后在onsuccess事件中调用该函数

var db;
$(document).ready(function () {
  window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    var request, ==;
    var vetor = [];
    if (!window.indexedDB) {
        alert("Seu navegador não suporta o recurso IndexedDB");
    }
    else {
        request = window.indexedDB.open("BD-Imagens", 4);
        request.onerror = function (event) {
            console.log("Erro ao abrir o banco de dados", event);
        }

        request.onupgradeneeded = function (event) {
            console.log("Atualizando");
            db = event.target.result;
            var objectStore = db.createObjectStore("imagens", { keyPath: "codigo" });
        };
        request.onsuccess = function (event) {
            console.log("Banco de dados aberto com sucesso");
            db = event.target.result;
            getImgFromIdb();

        }

    }

});

function getImgFromIdb()
{
    for (var i = 0; i < 5; i++) {
        var transaction = db.transaction(["imagens"]);
        var objectStore = transaction.objectStore("imagens");
        var request = objectStore.get(i.toString());

        var imgtmp = new Image();
        imgtmp.src = 'data:' + request.result.nome;

        vetor.push(imgtmp.src);


        request.onerror = function (event) {
            alert("erro");
        };
        request.onsuccess = function (event) {
            var html = "";
            html += '<div class="div-miniaturas"><img class="miniaturas" src="' + imgtmp.src + '"';
            html += '></div>';
            $('#container-miniaturas').append(html);

        };

    }

    vetor.forEach(function (chave) {
        var html = "";
        html += '<div class="div-miniaturas"><img class="miniaturas" src="' + valor + '"';
        html += '></div>';
        $('#container-miniaturas').append(html);
    });

}

var-db；
$（文档）.ready（函数（）{
window.indexedDB=window.indexedDB | | window.mozIndexedDB | | window.webkitIndexedDB | | window.msIndexedDB；
var请求，=；
var vetor=[]；
如果（！window.indexedDB）{
警报（“Seu navegador não suporta o recurso IndexedDB”）；
}
否则{
请求=window.indexedDB.open（“BD Imagens”，4）；
request.onerror=函数（事件）{
控制台日志（“Erro ao abrir o banco de dados”，事件）；
}
request.onupgradeneeded=函数（事件）{
console.log（“Atualizando”）；
db=event.target.result；
var objectStore=db.createObjectStore（“imagens”，{keyPath:“codigo”}）；
};
request.onsuccess=函数（事件）{
console.log（“Banco de dados aberto com Successo”）；
db=event.target.result；
getImgFromIdb（）；
}
}
});
函数getImgFromIdb（）
{
对于（变量i=0；i<5；i++）{
var transaction=db.transaction（[“imagens”]）；
var objectStore=transaction.objectStore（“imagens”）；
var request=objectStore.get（i.toString（））；
var imgtmp=新图像（）；
imgtmp.src='data:'+request.result.nome；
检查推送（imgtmp.src）；
request.onerror=函数（事件）{
警报（“erro”）；
};
request.onsuccess=函数（事件）{
var html=“”；
html+=''；
$（“#容器缩影”）.append（html）；
};
}
forEach（功能（chave）审查员{
var html=“”；
html+=''；
$（“#容器缩影”）.append（html）；
});
}

我还没有测试代码，但这应该是可行的

如果您发现IndexedDB很难使用，那么您应该使用任何IndexedDB库。请查看mdn doc以获取库列表-
很抱歉延迟响应，非常感谢您的帮助，但是现在出现了这个明显的错误，InvalidStateError：试图使用一个不可用或不再可用的对象。Yeah vetor在方法内部不可访问，在方法中初始化或全局初始化。