DOM indexdb 超出配额异常 - 错误处理

Question

我们正在使用 indexedDB 在本地存储文件。当浏览器运行超出 space（达到可用配额）时，我们会遇到问题。似乎事务被标记为错误（dom exception quota exceeded indexdb）。虽然这并没有在 .onerror 句柄中冒出来。我们有以下示例，其中 objectStoreRequest.onerror 似乎无法正常工作。如果我们从开发工具模拟等于 0MB 的自定义存储配额，那么我们将触发错误，我们不会看到来自 objectStoreRequest.onerror 的日志，这是我们所期望的。为了能够看到有错误，我们必须放置一个 setTimeout，它会在几秒钟后被调用，那时我们将能够在事务中看到错误。这是我们遗漏的东西吗，有人设法正确处理这个错误吗？

const simulateStorageQuotaError = () => {// Let us open our database
  var DBOpenRequest = window.indexedDB.open("toDoList", 4);

  var db = null;
  DBOpenRequest.onsuccess = function (event) {
    db = DBOpenRequest.result;

    // open a read/write db transaction, ready for adding the data
    //@ts-ignore
    var transaction = db.transaction(["toDoList"], "readwrite");

    // report on the success of the transaction completing, when everything is done
    transaction.oncomplete = function (event: any) {
      console.log('Transaction completed.', event);
    };

    transaction.onerror = function (event: any) {
      console.log('Transaction not opened due to error. Duplicate items not allowed.', event);
    };

    // create an object store on the transaction
    var objectStore = transaction.objectStore("toDoList");

    for (let i = 0; i < 100; i++) {
      // Create a new item to add in to the object store
      var newItem = { taskTitle: `Task Title ${i}`, hours: 19, minutes: 30, day: 24, month: 'December', year: 2013, notified: "no" };

      // make a request to add our newItem object to the object store
      var objectStoreRequest = objectStore.add(newItem);

      objectStoreRequest.onsuccess = function (event: any) {
        console.log('Request successful.', event);
        console.log('Request successful: transaction', transaction);

        setTimeout(() => {
          console.log('transaction from setTimeout', transaction);
        }, 1000);
      }
    }
  };

  // This event handles the event whereby a new version of
  // the database needs to be created Either one has not
  // been created before, or a new version number has been
  // submitted via the window.indexedDB.open line above
  DBOpenRequest.onupgradeneeded = function (event) {
    //@ts-ignore
    var db = event.target.result;

    db.onerror = function (event: any) {
      console.log('Error loading database.', event);
    };

    // Create an objectStore for this database
    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });

    // define what data items the objectStore will contain
    objectStore.createIndex("hours", "hours", { unique: false });
    objectStore.createIndex("minutes", "minutes", { unique: false });
    objectStore.createIndex("day", "day", { unique: false });
    objectStore.createIndex("month", "month", { unique: false });
    objectStore.createIndex("year", "year", { unique: false });

    objectStore.createIndex("notified", "notified", { unique: false });
  };
}

Answer 1

根据this guide：

IndexedDB

If the origin has exceeded its quota, attempts to write to IndexedDB will fail. The transaction's onabort() handler will be called, passing an event. The event will include a DOMException in the error property. Checking the error name will return QuotaExceededError.
const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = function(event) {
  const error = event.target.error; // DOMException
  if (error.name == 'QuotaExceededError') {
    // Fallback code goes here
  }
};

DOM indexdb 超出配额异常 - 错误处理

DOM Exception quota exceeded indexdb - error handling

javascript

dom

indexeddb

IndexedDB