IndexedDB应用加载房间详情页异常：cursor成功回调未执行求助

看起来你遇到的是IndexedDB异步操作里常见的坑——因为IndexedDB的所有核心操作都是异步的，你的代码可能没正确等待异步流程完成，导致直接跳过了openCursor的onsuccess回调。结合你提供的代码片段，我整理了几个可能的原因和对应的修复方案：

1. 未正确处理数据库打开的异步流程 #

你的getPage函数里调用indexedDB.open后，必须在openRequest.onsuccess回调内才能进行后续的Store和Cursor操作——否则数据库还没打开就执行后续代码，自然不会触发回调。另外要注意：IndexedDB的事务是短期有效的，所有操作必须在回调内完成。

修正后的代码大致结构应该是这样：

function getPage(roomId) {
  var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
  
  // 打开数据库，用const声明变量避免作用域问题
  const openRequest = indexedDB.open("rooms", 1);

  // 处理数据库升级（首次打开或版本更新时触发）
  openRequest.onupgradeneeded = function(e) {
    const db = e.target.result;
    // 确保rooms对象仓库存在，这里假设用id作为主键
    if (!db.objectStoreNames.contains("rooms")) {
      db.createObjectStore("rooms", { keyPath: "id" });
    }
  };

  // 数据库打开成功后再执行查询操作
  openRequest.onsuccess = function(e) {
    const db = e.target.result;
    // 开启只读事务（仅查询数据时用readonly即可）
    const transaction = db.transaction("rooms", "readonly");
    const itemStore = transaction.objectStore("rooms");

    // 如果你只是查询单个房间，用get()比openCursor高效得多
    const getRequest = itemStore.get(roomId);
    
    getRequest.onsuccess = function(e) {
      const roomData = e.target.result;
      if (roomData) {
        // 在这里写加载房间详情的逻辑，比如渲染到页面
        console.log("获取到房间数据:", roomData);
        renderRoomDetail(roomData);
      } else {
        console.error("未找到ID为" + roomId + "的房间");
      }
      // 可选：操作完成后关闭数据库连接
      db.close();
    };

    getRequest.onerror = function(e) {
      console.error("获取房间数据失败:", e.target.error);
      db.close();
    };

    // 如果你确实需要用openCursor遍历数据，确保回调正确绑定
    // const cursorRequest = itemStore.openCursor();
    // cursorRequest.onsuccess = function(e) {
    //   const cursor = e.target.result;
    //   if (cursor) {
    //     if (cursor.value.id === roomId) {
    //       renderRoomDetail(cursor.value);
    //     }
    //     cursor.continue();
    //   } else {
    //     console.log("遍历结束，未找到目标房间");
    //   }
    // };
  };

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

2. 变量作用域问题 #

如果你的openRequest没有用const/let声明，会变成全局变量，可能被后续操作覆盖，导致之前的回调无法触发。一定要在函数内用块级作用域声明变量（比如const openRequest = ...）。

3. 链接默认行为干扰 #

你的HTML里的<a>标签带有href="/static#/view/124"，点击后会触发页面锚点跳转，可能中断JavaScript的异步操作。可以在onclick事件里阻止默认行为：

<li id="124"> 
  <small>2.&nbsp;</small> 
  <a href="/static#/view/124" onclick="getPage(124); return false;">FH102</a> 
</li>

更推荐用现代的事件监听方式（避免内联事件，代码更易维护）：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a[href^="/static#/view/"]').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转行为
      const roomId = this.href.split('/').pop(); // 从链接中提取roomId
      getPage(roomId);
    });
  });
});

额外提示 #

• 单个数据查询优先用get(roomId)，比openCursor遍历效率更高，代码也更简洁。
• 操作完成后记得调用db.close()关闭数据库连接，避免不必要的资源占用。

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