IndexedDB erklärt.

In unserem vorherigen Artikel haben wir Dexie besprochen, einen Wrapper für IndexedDB. In diesem Artikel diskutieren wir IndexedDB. Sie müssen mit dieser localStorage-API vertraut sein, die häufig zum Speichern von Informationen im Browser verwendet wird. Ebenso wird IndexedDB für die clientseitige Speicherung verwendet.

Was ist IndexedDB?

Erläuterung der MDN-Dokumentation:

IndexedDB ist eine Low-Level-API für die clientseitige Speicherung großer Mengen strukturierter Daten, einschließlich Dateien/Blobs. Diese API verwendet Indizes, um eine leistungsstarke Suche dieser Daten zu ermöglichen. Während Web Storage für die Speicherung kleinerer Datenmengen nützlich ist, ist es für die Speicherung größerer Mengen strukturierter Daten weniger nützlich.

IndexedDB bietet eine Lösung. Dies ist die Hauptzielseite für die IndexedDB-Abdeckung von MDN – hier stellen wir Links zu den vollständigen API-Referenz- und Nutzungshandbüchern, Details zur Browserunterstützung und einige Erläuterungen zu Schlüsselkonzepten bereit.

Beispiel-Repository:

MDN bietet ein Beispiel-Github-Repository und verfügt über script/todo.js.

Das Skript wird mit window.onload initialisiert

window.onload = () => {
}

Öffnen Sie eine Anfrage an die Datenbank:

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

Verbindungsfehler:

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

Bei erfolgreicher Datenbankverbindung:

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();
};

Daten hinzufügen

// 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}`));
};

Beobachtung: localStorage vs. IndexedDB

Vielleicht ist Ihnen inzwischen klar geworden, dass allein zum Hinzufügen eines Datensatzes eine Menge Code erforderlich ist und dass es asynchrone Rückrufe wie onerror und onsuccess gibt. Darauf wird in dieser Stack-Exchange-Antwort hingewiesen.

Um die Handhabung dieser IndexedDB zu vereinfachen, kann Dexie verwendet werden.

Daten mit Dexie hinzufügen:

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>
 </>
 );
}

Diese Wrapper-API erinnert mich an ORMs wie Prisma und Drizzle.

Über uns:

Bei Thinkthroo studieren wir große Open-Source-Projekte und stellen Architekturführer zur Verfügung. Wir haben mit Rückenwind resubale Komponenten entwickelt, die Sie in Ihrem Projekt nutzen können. Wir bieten Next.js-, React- und Node-Entwicklungsdienste an.

Buchen Sie einen Termin mit uns, um Ihr Projekt zu besprechen.

Referenzen:

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-different-from-indexeddb

Das obige ist der detaillierte Inhalt vonIndexedDB erklärt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!