嘿，刚接触IndexedDB确实会有点摸不着头脑，不过跨页面共享数据本来就是它的原生能力之一，咱们一步步来搞定你的问题～

首先得明确：IndexedDB是同源共享的，同一域名、协议、端口下的所有页面，都能访问同一个数据库，核心是确保你在两个页面里用的数据库名、对象仓库名、版本号完全一致。

先看你的代码基础 #

你给出的代码片段只完成了数据库的打开/创建，咱们先把第二个页面检索数据的完整流程补全，同时帮你梳理关键注意点：

第二个页面检索数据的完整代码示例 #

var db;
const dbName = "biometricData";
const osName = "userdata";

// 打开数据库——必须和第一个页面用完全相同的dbName和版本号！
var request = indexedDB.open(dbName, 1);

// 处理数据库打开失败的情况
request.onerror = function(event) {
  console.error("打开数据库出错:", event.target.error);
};

// 数据库连接成功后，触发数据检索
request.onsuccess = function(event) {
  db = event.target.result;
  console.log("数据库连接成功");
  // 调用自定义的检索函数
  getStoredUserData();
};

// 版本升级逻辑（只有当版本号提升时才会触发，这里保持和第一个页面一致即可）
request.onupgradeneeded = function(event) {
  var db = event.target.result;
  // 确保对象仓库存在（如果第一个页面已经创建过，这里只会在版本更新时执行）
  if (!db.objectStoreNames.contains(osName)) {
    // 这里的keyPath要和你第一个页面存数据时的配置完全一致！
    db.createObjectStore(osName, { keyPath: "id" });
  }
};

// 核心：检索数据的函数
function getStoredUserData() {
  // 创建只读事务（检索数据不需要写权限，readonly更高效）
  var transaction = db.transaction(osName, "readonly");
  var objectStore = transaction.objectStore(osName);

  // 方式1：获取仓库里的所有数据
  var getAllRequest = objectStore.getAll();
  
  getAllRequest.onsuccess = function(event) {
    const userDataList = event.target.result;
    console.log("拿到的所有数据:", userDataList);
    // 这里可以把数据渲染到页面上，比如插入到DOM元素里
  };

  getAllRequest.onerror = function(event) {
    console.error("检索数据失败:", event.target.error);
  };

  // 方式2：根据keyPath获取单条数据（比如你的数据id是1）
  // var getSingleRequest = objectStore.get(1);
  // getSingleRequest.onsuccess = function(event) {
  //   const singleData = event.target.result;
  //   console.log("单条数据:", singleData);
  // };
}

必须注意的几个关键点 #

• 同源规则：两个页面必须是同一域名、同一协议（http/https）、同一端口，否则IndexedDB无法共享数据。
• 版本号一致：两个页面indexedDB.open的第二个参数（版本号）必须完全相同，不然会触发版本升级事件，可能导致对象仓库重置、数据丢失。
• 对象仓库配置匹配：第一个页面创建对象仓库时指定的keyPath（比如{ keyPath: "id" }），第二个页面必须完全一致，否则检索时会报错。
• 事务权限：检索数据用"readonly"权限就足够，比"readwrite"更轻量。

排查问题的小技巧 #

如果第二个页面拿不到数据，可以按这个顺序排查：

1. 打开浏览器开发者工具（F12），切换到Application标签，左侧找到IndexedDB，查看biometricData数据库下的userdata仓库有没有数据。如果这里为空，说明第一个页面的数据根本没存进去，得先排查第一个页面的存数据逻辑。
2. 检查两个页面的控制台有没有报错，比如数据库打开失败、对象仓库不存在等。

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