IndexedDB は、大量の構造化データを保存するための低レベル API であり、Web アプリケーションでクライアント側のストレージとしてよく使用されます。 HTML5 で IndexedDB を使用する基本的な手順は次のとおりです。

1. データベースを開きます。

 JavaScript
 let db;
const request = window.indexedDB.open('YourDatabaseName', 1);

request.onerror = function (event) {
  console.log('Database error: ' + event.target.errorCode);
};

request.onsuccess = function (event) {
  db = event.target.result;
  console.log('Database opened successfully');
};

request.onupgradeneeded = function (event) {
  // This is called only if the database version is increased
  const db = event.target.result;
  const objectStore = db.createObjectStore('YourObjectName', { keyPath: 'id', autoIncrement: true });

  // You can define indexes here if needed
  objectStore.createIndex('indexName', 'propertyName', { unique: false });
};

2. データを追加します。

 JavaScript
 const transaction = db.transaction(['YourObjectName'], 'readwrite');
const objectStore = transaction.objectStore('YourObjectName');
const data = { id: 1, name: 'John Doe', age: 25 };

const request = objectStore.add(data);

request.onsuccess = function (event) {
  console.log('Data added successfully');
};

request.onerror = function (event) {
  console.log('Error adding data: ', event.target.error);
};

3. データを取得します。

 JavaScript
 const transaction = db.transaction(['YourObjectName'], 'readonly');
const objectStore = transaction.objectStore('YourObjectName');
const request = objectStore.get(1); // Get data with ID 1

request.onsuccess = function (event) {
  const data = event.target.result;
  if (data) {
    console.log('Retrieved data:', data);
  } else {
    console.log('No data found with the specified ID');
  }
};

request.onerror = function (event) {
  console.log('Error retrieving data: ', event.target.error);
};

4. データを更新します。

 JavaScript
 const transaction = db.transaction(['YourObjectName'], 'readwrite');
const objectStore = transaction.objectStore('YourObjectName');
const request = objectStore.put({ id: 1, name: 'Updated Name', age: 30 });

request.onsuccess = function (event) {
  console.log('Data updated successfully');
};

request.onerror = function (event) {
  console.log('Error updating data: ', event.target.error);
};

5. データを削除します。

 JavaScript
 const transaction = db.transaction(['YourObjectName'], 'readwrite');
const objectStore = transaction.objectStore('YourObjectName');
const request = objectStore.delete(1); // Delete data with ID 1

request.onsuccess = function (event) {
  console.log('Data deleted successfully');
};

request.onerror = function (event) {
  console.log('Error deleting data: ', event.target.error);
};

これらの例では、IndexedDB での基本的な CRUD 操作を説明します。アプリケーションによっては、トランザクションの処理、複数のオブジェクト ストアの作成、IndexedDB が提供するより高度な機能の使用が必要になる場合があります。