Rumah > Artikel > hujung hadapan web > 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.
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.
MDN menyediakan contoh repositori Github dan mempunyai skrip/todo.js.
Skrip dimulakan menggunakan 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}`)); };
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.
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.
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.
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
Atas ialah kandungan terperinci IndexedDB menjelaskan.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!