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

indexeddbとは？とは何ですか

mdnドキュメントの説明：

IndexEdDBは、ファイル/ブロブを含むかなりの量の構造化データをクライアント側のストレージの低レベルAPIです。このAPIは、インデックスを使用して、このデータの高性能検索を有効にします。 Webストレージは少量のデータを保存するのに役立ちますが、構造化されたデータを大量に保存するのにあまり役立ちません。

indexedDBはソリューションを提供します。これは、MDNのIndexEdDBカバレッジのメインランディングページです。ここでは、完全なAPIリファレンスおよび使用ガイド、ブラウザのサポートの詳細、および重要な概念の説明へのリンクを提供します。

例リポジトリ：

mdnはGithubリポジトリの例を提供し、スクリプト/todo.jsを持っています。

スクリプトはwindow.onload

を使用して初期化されます

window.onload =（）=> { }

window.onload = () => {
}

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

//データベースを開いてみましょう const dbopenrequest = window.indexeddb.open（ 'todolist'、4）;

window.onload = () => {
}

接続エラー：

// 2つのイベントハンドラーを登録して、データベースに正常に開かれているかどうかに基づいて行動するかどうか dbopenrequest.onerror =（event）=> { note.appendChild（createListitem（ 'エラーデータベースの読み込み'））; };

window.onload = () => {
}

成功したデータベース接続について：

dbopenrequest.onsuccess =（event）=> { note.appendChild（createListitem（ 'データベースInterivesided。'））; //データベースをDB変数に開いた結果を保存します。これは以下でよく使用されます db = dbopenrequest.result; // displayData（）関数を実行して、タスクリストにすべてのto-doリストデータに既にindexedDBに入力されます displayData（）; };

window.onload = () => {
}

データを追加

//読み取り/書き込みDBトランザクションを開き、データを追加する準備ができています const transaction = db.transaction（['todolist']、 'readwrite'）; //データベースに既に追加されているオブジェクトストアを呼び出す const objectstore = transaction.objectstore（ 'todolist'）; // newItemオブジェクトをオブジェクトストアに追加するリクエストを行う const objectStorerequest = objectStore.add（newItem [0]）; ObjectStorereQuest.Onsuccess =（event）=> { //成功に関するデータを処理します。 } //すべてが完了したときに、トランザクションの成功に関するレポート transaction.oncomplete =（）=> { note.AppendChild（createListitem（ 'トランザクションが完了：データベースの変更が完了しました。'））; // DisplayData（）を再度実行して、データの表示を更新して、新しく追加されたアイテムを表示します。 displayData（）; }; //予期しないエラーのハンドラー transaction.onerror =（）=> { note.appendChild（createListitem（ `エラーのためにトランザクションが開かれていない：$ {transaction.error}`））; };

window.onload = () => {
}

観察：localStorage vs indexeddb

レコードを追加するためだけに多くのコードが必要であり、OnerrorやOnsuccessなどの非同期コールバックがあることに気付くかもしれません。これは、このスタック交換の回答で指摘されています。

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

dexieでデータを追加：

export関数Addfriendform（{defaultage} = {defaultage：21}）{ const [name、setname] = uesestate（ ''）; const [age、setage] = uesestate（defaultage）; const [status、setstatus] = uesestate（ ''）; async関数addfriend（）{ 試す { //新しい友達を追加してください！ const id = await db.friends.add（{ 名前、 年 }）; setStatus（ `friend $ {name}に正常に追加されました。ID$ {id}`）を取得しました。 setName（ ''）; setage（defaultage）; } catch（error）{ setStatus（ `$ {name}を追加しなかった：$ {error}`）; } } 戻る （

{status}

名前： setName（ev.target.value）} /> 年： setage（number（ev.target.value））} /> add > ）; }

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 (
 
 
{status}
 Name:
  setName(ev.target.value)}
 />
 Age:
  setAge(Number(ev.target.value))}
 />
 Add
 >
 );
}

私たちについて：

Thinkthrooで、大規模なオープンソースプロジェクトを研究し、建築ガイドを提供しています。プロジェクトで使用できるTailwindで構築されたResubaleコンポーネントを開発しました。 next.js、Reactおよびノー​​ド開発サービスを提供します。

あなたのプロジェクトについて話し合うために私たちとの会議を予約してください。

参照：

https://www.reddit.com/r/sveltejs/comments/15rj12h/any_downsides_to_using_indexeddb_vs_localstorage/
https://developer.mozilla.org/en-us/docs/web/api/indexeddb_api
https://github.com/mdn/dom-examples/tree/main/to-do-notifications
https://softwareengineering.stackexchange.com/questions/219953/how-is-localstorage-different-from-indexeddb