DOM例外配額超出indexdb-錯誤處理

我們使用 indexedDB 在本地存盤檔案。當瀏覽器空間不足（達到可用配額）時，我們遇到了問題。似乎該事務被標記為錯誤（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 });
  };
}

uj5u.com熱心網友回復：

根據本指南：

索引資料庫

如果源已超過其配額，則嘗試寫入 IndexedDB 將失敗。onabort()將呼叫事務的處理程式，傳遞一個事件。該事件將DOMException在錯誤屬性中包含 a。檢查錯誤name將回傳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
  }
};

標籤：javascript dom 索引数据库

上一篇：在元素中間添加新標簽

下一篇：Angular-獲取實際的HTML元素代碼而不是DOM生成的元素