IndexedDB menjelaskan.

Dalam artikel kami sebelum ini, kami membincangkan Dexie, pembungkus untuk IndexedDB. Dalam artikel ini, kita membincangkan IndexedDB. Anda mesti biasa dengan localStorage API ini, yang biasa digunakan untuk menyimpan maklumat dalam penyemak imbas. Begitu juga, IndexedDB digunakan untuk storan sebelah pelanggan.

Apakah IndexedDB?

Penjelasan dokumentasi MDN:

IndexedDB ialah API peringkat rendah untuk penyimpanan sisi klien bagi sejumlah besar data berstruktur, termasuk fail/gumpalan. API ini menggunakan indeks untuk mendayakan carian berprestasi tinggi bagi data ini. Walaupun Storan Web berguna untuk menyimpan jumlah data yang lebih kecil, ia kurang berguna untuk menyimpan jumlah data berstruktur yang lebih besar.

IndexedDB menyediakan penyelesaian. Ini ialah halaman pendaratan utama untuk liputan IndexedDB MDN — di sini kami menyediakan pautan kepada rujukan API penuh dan panduan penggunaan, butiran sokongan penyemak imbas dan beberapa penjelasan tentang konsep utama.

Contoh repositori:

MDN menyediakan contoh repositori Github dan mempunyai skrip/todo.js.

Skrip dimulakan menggunakan window.onload

window.onload = () => {
}

Buka permintaan ke pangkalan data:

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

Ralat sambungan:

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

Pada sambungan pangkalan data yang berjaya:

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

Tambah data

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

Pemerhatian: localStorage vs IndexedDB

Sekarang anda mungkin menyedari bahawa terdapat banyak kod yang diperlukan hanya untuk menambah rekod, anda mempunyai panggilan balik tak segerak seperti onerror dan onsuccess. Ini ditunjukkan dalam jawapan pertukaran tindanan ini.

Untuk memudahkan pengendalian IndexedDB ini, Dexie boleh digunakan.

Tambah data dengan 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 pembalut ini mengingatkan saya kepada ORM seperti Prisma dan Drizzle.

Tentang kami:

Di Thinkthroo, kami mengkaji projek sumber terbuka yang besar dan menyediakan panduan seni bina. Kami telah membangunkan Komponen resubale, dibina dengan tailwind, yang boleh anda gunakan dalam projek anda. Kami menawarkan perkhidmatan pembangunan Next.js, React dan Node.

Tempah mesyuarat dengan kami untuk membincangkan projek anda.

Rujukan:

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

Atas ialah kandungan terperinci IndexedDB menjelaskan.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!