Apabila aplikasi web menjadi lebih canggih, keperluan untuk penyelesaian storan sisi pelanggan yang cekap telah berkembang. IndexedDB, API peringkat rendah untuk menyimpan sejumlah besar data berstruktur, ialah alat yang berkuasa untuk pembangun web, jurutera perisian dan peminat web yang ingin mencipta aplikasi yang mantap dan berkemampuan luar talian.
Dalam blog ini, kami akan meneroka apa itu IndexedDB, cara ia berfungsi dan cara menggunakannya dengan berkesan dengan contoh praktikal. Sama ada anda sedang membina Apl Web Progresif (PWA), papan pemuka yang kompleks atau permainan, IndexedDB boleh membantu anda mengurus data dengan lancar.
IndexedDB ialah pangkalan data NoSQL berasaskan pelayar yang direka untuk menyimpan sejumlah besar data berstruktur, termasuk fail dan gumpalan. Tidak seperti kuki atau localStorage, IndexedDB membenarkan anda menyimpan data dalam format berstruktur dan menanyakannya menggunakan indeks, menjadikannya sesuai untuk kes penggunaan yang kompleks.
IndexedDB beroperasi pada struktur pangkalan data yang terdiri daripada:
Operasi utama dalam IndexedDB termasuk:
Berikut ialah cara untuk mencipta pangkalan data IndexedDB yang dipanggil MyDatabase dengan pengguna kedai objek.
const dbName = "MyDatabase";
const dbVersion = 1; // Versioning is required for schema updates.
const request = indexedDB.open(dbName, dbVersion);
request.onupgradeneeded = function (event) {
const db = event.target.result;
// Create an object store named 'users' with 'id' as the keyPath
if (!db.objectStoreNames.contains("users")) {
db.createObjectStore("users", { keyPath: "id" });
}
console.log("Database setup complete");
};
request.onsuccess = function (event) {
const db = event.target.result;
console.log("Database opened successfully");
};
request.onerror = function (event) {
console.error("Error opening database:", event.target.errorCode);
};
Penjelasan:
Kaedah indexedDB.open membuka atau mencipta pangkalan data.
Acara onupgradeneeded dicetuskan apabila mencipta pangkalan data baharu atau meningkatkan versinya.
Stor objek bernama pengguna dicipta dengan id sebagai kunci utama.
Anda boleh menambah data pada stor objek menggunakan transaksi.
function addUser(id, name, email) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readwrite");
const objectStore = transaction.objectStore("users");
const user = { id, name, email };
const addRequest = objectStore.add(user);
addRequest.onsuccess = function () {
console.log("User added:", user);
};
addRequest.onerror = function (event) {
console.error("Error adding user:", event.target.errorCode);
};
};
}
// Add a new user
addUser(1, "John Doe", "john.doe@example.com");
Penjelasan:
Transaksi dibuat dengan mod tulis baca untuk mengubah suai data.
Kaedah tambah memasukkan data ke dalam stor objek pengguna.
Dapatkan semula data dengan menggunakan kaedah dapatkan atau ulangi semua entri.
function getUser(id) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readonly");
const objectStore = transaction.objectStore("users");
const getRequest = objectStore.get(id);
getRequest.onsuccess = function () {
if (getRequest.result) {
console.log("User found:", getRequest.result);
} else {
console.log("User not found");
}
};
getRequest.onerror = function (event) {
console.error("Error retrieving user:", event.target.errorCode);
};
};
}
// Get user with ID 1
getUser(1);
Penjelasan:
Kaedah get mengambil rekod tertentu dengan kuncinya.
Pendapatan data tidak segerak, jadi pengendali kejayaan dan ralat digunakan.
Kemas kini rekod sedia ada menggunakan kaedah put.
function updateUser(id, updatedData) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readwrite");
const objectStore = transaction.objectStore("users");
const putRequest = objectStore.put({ ...updatedData, id });
putRequest.onsuccess = function () {
console.log("User updated:", { ...updatedData, id });
};
putRequest.onerror = function (event) {
console.error("Error updating user:", event.target.errorCode);
};
};
}
// Update user with ID 1
updateUser(1, { name: "Johnathan Doe", email: "johnathan.doe@example.com" });
Alih keluar rekod menggunakan kaedah padam.
function deleteUser(id) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readwrite");
const objectStore = transaction.objectStore("users");
const deleteRequest = objectStore.delete(id);
deleteRequest.onsuccess = function () {
console.log("User deleted with ID:", id);
};
deleteRequest.onerror = function (event) {
console.error("Error deleting user:", event.target.errorCode);
};
};
}
// Delete user with ID 1
deleteUser(1);
| Feature | IndexedDB | localStorage | sessionStorage |
|---|---|---|---|
| Storage Limit | Several MB to GB | 5 MB (approx) | 5 MB (approx) |
| Data Format | Key-value pairs | Key-value pairs | Key-value pairs |
| Asynchronous | Yes | No | No |
| Structured Data | Yes | No | No |
Gunakan Transaksi Dengan Betul: Sentiasa uruskan operasi data dalam transaksi untuk memastikan atomicity.
Kendalikan Ralat Dengan Anggun: Laksanakan pengendali ralat untuk nyahpepijat dan maklum balas pengguna yang lebih baik.
Kawalan Versi: Tingkatkan versi pangkalan data dengan berhati-hati untuk mengurus perubahan skema.
Uji Senario Luar Talian: IndexedDB sering digunakan untuk keupayaan luar talian; pastikan ia berfungsi seperti yang diharapkan tanpa sambungan internet.
IndexedDB ialah alat yang berkuasa untuk storan data pihak pelanggan, menawarkan ciri yang jauh mengatasi kaedah storan tradisional seperti localStorage. Dengan sokongan untuk data berstruktur, kapasiti storan yang besar dan kefungsian luar talian, IndexedDB ialah teknologi penting untuk membina aplikasi web moden.
Pengambilan Utama:
IndexedDB sesuai untuk menyimpan set data yang besar dan kompleks secara setempat.
Transaksi adalah penting untuk mengurus operasi data dalam IndexedDB.
Ia menyediakan sokongan luar talian yang mantap, menjadikannya asas bagi Apl Web Progresif.
Dengan menguasai IndexedDB, anda boleh membina aplikasi berskala, mengutamakan luar talian dengan prestasi dan pengalaman pengguna yang unggul. Mula bereksperimen dengan IndexedDB dalam projek anda hari ini!
Atas ialah kandungan terperinci Bagaimana untuk menggunakan IndexedDB? Panduan mengenai Operasi CRUD yang lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk menyelesaikan masalah kehilangan steam_api.dll
Bagaimana untuk membuang tera air pada TikTok
Kelebihan memuat turun laman web rasmi Yiou Exchange App
Platform mata wang digital domestik
Bagaimana untuk memadam sepenuhnya mongodb jika pemasangan gagal
Apakah tulisan brc20
Semak status port yang diduduki dalam tingkap
Apakah perisian pengaturcaraan mikropengawal?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
