如何在AJAX响应回调中向IndexedDB插入数据？

核心问题 #

• indexedDB.open的onsuccess事件只会在数据库打开完成时触发一次，你在AJAX成功回调里才绑定该事件，此时数据库早已打开完成，绑定的回调永远不会执行，这是数据无法插入的最主要原因。
• 语法错误：AJAX配置的url参数末尾缺少闭合引号，会直接报错阻塞代码执行。
• 逻辑冗余：遍历每条数据都重复绑定事件、开启数据库事务、关闭数据库连接，不仅执行效率极低，还容易出现索引冲突、连接占用等异常。
• 缺少错误捕获：未监听IndexedDB各环节的错误事件，无法定位具体异常点。

解决思路 #

1. 数据库初始化完成后将实例缓存到全局变量，后续操作直接调用缓存的实例即可，无需重复监听打开事件。
2. 拿到AJAX返回的全量数据后，开启一次读写事务批量完成所有数据插入，避免频繁创建事务。
3. 补充各环节错误监听，方便排查异常。

修正后代码 #

数据库初始化部分 #

// This works on all devices/browsers, and uses IndexedDBShim as a final fallback 
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
// 全局缓存数据库实例
var dbInstance = null;
// 打开（或创建）数据库
var open = indexedDB.open("MyDatabase", 1);

// 创建 schema
open.onupgradeneeded = function() {
    var db = open.result;
    var store = db.createObjectStore("MyObjectStore", {keyPath: "id"});
    var index = store.createIndex("NameIndex", ["name.last", "name.first"]);
};

// 打开成功后缓存实例
open.onsuccess = function() {
    dbInstance = open.result;
    // 监听全局数据库错误
    dbInstance.onerror = function(e) {
        console.error("数据库错误：", e.target.error);
    };
}

open.onerror = function(e) {
    console.error("数据库打开失败：", e.target.error);
}

AJAX请求部分 #

$.ajax({
    url: "https://sometise.com",
    headers: {
        "Authorization": "TOKEN"
    },
    type: "GET",
    success: function (data) {
        // 等待数据库初始化完成再执行插入
        if (!dbInstance) {
            console.warn("数据库未初始化完成，稍后重试");
            return;
        }
        // 开启一次事务批量插入所有数据
        var tx = dbInstance.transaction("MyObjectStore", "readwrite");
        var store = tx.objectStore("MyObjectStore");
        
        data.forEach(function(el) {
            var myArray = {
                ID: el.id,
                Content: el // 原代码此处写为data会存入整个接口返回数组，按需调整为当前遍历项
            };
            store.put({id: el.id, name: {first: myArray, last: "Doe"}});
        });

        tx.oncomplete = function() {
            console.log("所有数据插入完成");
            // 无需每次插入都关闭数据库，页面卸载时关闭即可，频繁开关会影响性能
        };

        tx.onerror = function(e) {
            console.error("数据插入失败：", e.target.error);
        };
    },
    error: function(e) {
        console.error("AJAX请求失败：", e);
    }
});

内容的提问来源于stack exchange，提问作者drago