complete

complete イベントはトランザクションが成功裏に終了した場合に発生します。

バブリング なし
キャンセル 不可
インターフェイス Event
イベントハンドラープロパティ oncomplete

addEventListener() を使用:

// データベースを開く
const DBOpenRequest = window.indexedDB.open('toDoList', 4);

DBOpenRequest.onupgradeneeded = event => {
  const db = event.target.result;

  db.onerror = () => {
    console.log('Error creating database');
  };

  // このデータベースの objectStore を作成
  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 });
};

DBOpenRequest.onsuccess = event => {
  const db = DBOpenRequest.result;

  // DB の読み書きトランザクションを開き、データを追加する準備ができる
  const transaction = db.transaction(['toDoList'], 'readwrite');

  // `complete` のためのリスナーを追加
  transaction.addEventListener('complete', event => {
    console.log('Transaction was competed');
  });

  const objectStore = transaction.objectStore('toDoList');
  const newItem = { taskTitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'January', year: 2019 };
  const objectStoreRequest = objectStore.add(newItem);
};

oncomplete プロパティを使用:

// データベースを開く
const DBOpenRequest = window.indexedDB.open('toDoList', 4);

DBOpenRequest.onupgradeneeded = event => {
  const db = event.target.result;

  db.onerror = () => {
    console.log('Error creating database');
  };

  // このデータベースの objectStore を作成
  var objectStore = db.createObjectStore('toDoList', { keyPath: 'taskTitle' });

  // objectStore がどのようなデータアイテムを含むかを定義
  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 });
};

DBOpenRequest.onsuccess = event => {
  const db = DBOpenRequest.result;

  // DB の読み書きトランザクションを開き、データを追加する準備ができる
  const transaction = db.transaction(['toDoList'], 'readwrite');

  // `complete` のためのリスナーを追加
  transaction.oncomplete = event => {
    console.log('Transaction was competed');
  };

  const objectStore = transaction.objectStore('toDoList');
  const newItem = { taskTitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'January', year: 2019 };
  const objectStoreRequest = objectStore.add(newItem);
};

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
complete eventChrome 完全対応 24
完全対応 24
完全対応 23
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 16
完全対応 16
未対応 10 — 16
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 部分対応 10Opera 完全対応 15Safari 完全対応 7WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 22Opera Android 完全対応 14Safari iOS 完全対応 8Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
部分対応  
部分対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報