开发浏览器扩展时IndexedDB报Uncaught NotFoundError如何解决？

你遇到的NotFoundError由以下几个代码问题导致：

• 核心错误：对象存储名称前后不一致。你在onupgradeneeded回调中创建的对象存储名称为webpage，但在onsuccess回调中调用tx.objectStore("URL")时使用了不存在的URL作为对象存储名，触发找不到存储的报错。
• 索引创建逻辑错误：store.createIndex("link no.", "webpage", { unique: false })的第二个参数是需要索引的对象属性名，但你当前直接存储字符串类型的URL，不存在名为webpage的属性，该索引无法正常工作。
• 变量作用域冲突：你在onupgradeneeded回调中用let重新声明了db、store、index变量，和外层的全局变量完全隔离，属于潜在逻辑隐患。
• 存储结构不合理：直接存储字符串URL不利于后续的索引查询，建议改为存储带指定属性的对象。

修正后的完整代码 #

let request = window.indexedDB.open("MyTestDatabase", 1),
  db,
  tx,
  store,
  index;

request.onerror = function (e) {
  console.log("The database 'linkStorage' could not be opened");
};

request.onupgradeneeded = function (e) {
  // 直接使用外层变量，不要重复声明
  db = request.result;
  // 创建对象存储
  store = db.createObjectStore("webpage", { autoIncrement: true });
  // 索引对应存储对象的url属性
  index = store.createIndex("link no.", "url", { unique: false });
};

request.onsuccess = function (e) {
  db = request.result;

  tx = db.transaction("webpage", "readwrite");
  // 使用正确的对象存储名称webpage
  store = tx.objectStore("webpage");
  index = store.index("link no.");

  db.onerror = function (e) {
    console.log("ERROR" + e.target.errorCode);
  };

  // 存储为对象，匹配索引的属性设置
  var link = {url: location.href};
  store.put(link);
  tx.oncomplete = function () {
    db.close();
  };
};

注意：如果之前已经打开过版本为1的数据库，需要先在浏览器控制台的应用-存储-IndexedDB中删除旧的MyTestDatabase数据库，再重新运行代码，否则onupgradeneeded不会重新触发，新的存储和索引不会创建。

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