IndexedDB について説明しました。

前回の記事では、IndexedDB のラッパーである Dexie について説明しました。この記事では、IndexedDB について説明します。ブラウザに情報を保存するために一般的に使用される、この localStorage API についてよく知っている必要があります。同様に、IndexedDB はクライアント側のストレージに使用されます。

IndexedDB とは何ですか?

MDN ドキュメントの説明:

IndexedDB は、ファイル/BLOB を含む大量の構造化データをクライアント側で保存するための低レベル API です。この API はインデックスを使用して、このデータの高パフォーマンスな検索を可能にします。 Web Storage は少量のデータを保存する場合には便利ですが、大量の構造化データを保存する場合にはあまり役に立ちません。

IndexedDB はソリューションを提供します。これは、MDN の IndexedDB 対象範囲のメインのランディング ページです。ここでは、完全な API リファレンスと使用ガイド、ブラウザーのサポートの詳細、主要な概念の説明へのリンクを提供します。

リポジトリの例:

MDN はサンプル Github リポジトリを提供しており、script/todo.js があります。

スクリプトは window.onload を使用して初期化されます

window.onload = () => {
}

データベースへのリクエストを開きます:

// Let us open our database
const DBOpenRequest = window.indexedDB.open('toDoList', 4);

接続エラー:

// Register two event handlers to act on the database being opened successfully, or not
DBOpenRequest.onerror = (event) => {
 note.appendChild(createListItem('Error loading database.'));
};

データベース接続が成功した場合:

DBOpenRequest.onsuccess = (event) => {
 note.appendChild(createListItem('Database initialised.'));
// Store the result of opening the database in the db variable. This is used a lot below
 db = DBOpenRequest.result;
// Run the displayData() function to populate the task list with all the to-do list data already in the IndexedDB
 displayData();
};

データを追加

// Open a read/write DB transaction, ready for adding the data
const transaction = db.transaction(['toDoList'], 'readwrite');
// Call an object store that's already been added to the database
const objectStore = transaction.objectStore('toDoList');
// Make a request to add our newItem object to the object store
const objectStoreRequest = objectStore.add(newItem[0]);
objectStoreRequest.onsuccess = (event) => {
 // process data on success.
}
// Report on the success of the transaction completing, when everything is done
transaction.oncomplete = () => {
 note.appendChild(createListItem('Transaction completed: database modification finished.'));
// Update the display of data to show the newly added item, by running displayData() again.
 displayData();
};
// Handler for any unexpected error
transaction.onerror = () => {
 note.appendChild(createListItem(`Transaction not opened due to error: ${transaction.error}`));
};

観察: localStorage 対 IndexedDB

もうお気づきかと思いますが、レコードを追加するだけでも多くのコードが必要で、onerror や onsuccess などの非同期コールバックがあります。これは、このスタック交換の回答で指摘されています。

この IndexedDB の処理を​​簡素化するために、Dexie を使用できます。

Dexie でデータを追加します:

export function AddFriendForm({ defaultAge } = { defaultAge: 21 }) {
 const [name, setName] = useState('');
 const [age, setAge] = useState(defaultAge);
 const [status, setStatus] = useState('');
async function addFriend() {
 try {
 // Add the new friend!
 const id = await db.friends.add({
 name,
 age
 });
setStatus(`Friend ${name} successfully added. Got id ${id}`);
 setName('');
 setAge(defaultAge);
 } catch (error) {
 setStatus(`Failed to add ${name}: ${error}`);
 }
 }
return (
 <>
 <p>{status}</p>
 Name:
 <input
 type="text"
 value={name}
 onChange={(ev) => setName(ev.target.value)}
 />
 Age:
 <input
 type="number"
 value={age}
 onChange={(ev) => setAge(Number(ev.target.value))}
 />
 <button onClick={addFriend}>Add</button>
 </>
 );
}

このラッパー API は、Prisma や Drizzle などの ORM を思い出させます。

私たちについて:

Thinkthroo では、大規模なオープンソース プロジェクトを研究し、アーキテクチャ ガイドを提供しています。私たちは、tailwind を使用して構築された、プロジェクトで使用できる resubale コンポーネントを開発しました。 Next.js、React、Node 開発サービスを提供します。

プロジェクトについて話し合うためのミーティングを予約してください。

参考文献:

1. https://www.reddit.com/r/sveltejs/comments/15rj12h/any_downsides_to_using_indexeddb_vs_localstorage/

2. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

3. https://github.com/mdn/dom-examples/tree/main/to-do-notifications

4. https://softwareengineering.stackexchange.com/questions/219953/how-is-localstorage-Difference-from-indexeddb

以上がIndexedDB について説明しました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。