Panduan Pemula untuk IndexedDB

Tutorial Menggunakan Storan Sisi Pelanggan dalam Apl Web

Apabila membina aplikasi web moden, terutamanya apl web progresif (PWA), adalah penting untuk mempunyai cara untuk menyimpan data di luar talian. IndexedDB ialah pangkalan data sisi klien yang berkuasa yang membolehkan apl web menyimpan dan mendapatkan semula data, walaupun ketika pengguna berada di luar talian. Panduan ini akan membimbing anda melalui asas IndexedDB, menunjukkan kepada anda cara membuat, membaca, mengemas kini dan memadam data (operasi CRUD) dalam apl web anda.

Apakah IndexedDB?

IndexedDB ialah API peringkat rendah untuk penyimpanan sisi klien bagi sejumlah besar data berstruktur, termasuk fail dan gumpalan. Tidak seperti localStorage, IndexedDB membenarkan anda menyimpan jenis data yang kompleks, bukan hanya rentetan. Ia menggunakan model pangkalan data transaksi tak segerak, yang menjadikannya berkuasa untuk aplikasi yang perlu mengendalikan set data besar atau penyegerakan data luar talian.

Mengapa Menggunakan IndexedDB?

• Keupayaan luar talian: Sesuai untuk Apl Web Progresif (PWA) dan aplikasi luar talian yang diutamakan.
• Kapasiti storan: IndexedDB boleh menyimpan lebih banyak data berbanding localStorage (yang terhad kepada kira-kira 5-10MB).
• Fleksibiliti: Simpan objek kompleks seperti tatasusunan, objek dan juga gumpalan.
• Asynchronous: Operasi tidak menyekat urutan UI, bermakna apl anda kekal responsif.

Bermula: Menyediakan IndexedDB

Mari kita selami langkah teras untuk bekerja dengan IndexedDB. Kami akan meliputi:

• Mencipta atau membuka pangkalan data
• Mencipta stor objek (jadual)
• Menambah data
• Membaca data
• Mengemas kini data
• Memadamkan data

Langkah 1: Membuka Pangkalan Data

Untuk berinteraksi dengan IndexedDB, anda perlu membuka sambungan ke pangkalan data terlebih dahulu. Jika pangkalan data tidak wujud, ia akan dibuat.

const request = indexedDB.open('MyCustomersDatabase', 1);

request.onerror = (event) => {
    console.error('Database error:', event.target.errorCode);
};

request.onsuccess = (event) => {
    const db = event.target.result;
    console.log('Database opened successfully', db);
};

request.onupgradeneeded = (event) => {
    const db = event.target.result;
    if (!db.objectStoreNames.contains('customers')) {
        const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
        console.log('Object store created.');
    }
};

Berikut ialah perkara yang berlaku:

• indexedDB.open membuka atau mencipta pangkalan data.
• onerror mengendalikan sebarang ralat semasa membuka pangkalan data.
• onsuccess dicetuskan apabila sambungan pangkalan data berjaya dibuka.
• onupgradeneeded dipecat apabila pangkalan data perlu dinaik taraf (cth., jika ini kali pertama membuka pangkalan data atau jika versi berubah). Di sinilah anda mentakrifkan stor objek anda (anggap ia sebagai jadual dalam SQL).

Langkah 2: Menambah Data ke IndexedDB

Sekarang kita telah menyediakan pangkalan data dan stor objek, mari tambahkan beberapa data padanya.

const addCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.add(customer);

    request.onsuccess = () => {
        console.log('Customer added:', customer);
    };

    request.onerror = (event) => {
        console.error('Error adding customer:', event.target.errorCode);
    };
}

const customer = { id: 1, name: 'John Doe', email: 'john@example.com' };

request.onsuccess = (event) => {
    const db = event.target.result;
    addCustomer(db, customer);
};

Berikut ialah perkara yang berlaku:

• Kami membuat transaksi dengan akses 'tulis baca' untuk membenarkan pengubahsuaian.
• Kaedah add() digunakan untuk memasukkan data ke dalam stor objek.
• Kami mendengar peristiwa kejayaan dan ralat untuk mengesahkan sama ada data telah berjaya ditambahkan.

Langkah 3: Membaca Data daripada IndexedDB

Membaca data daripada IndexedDB juga mudah. Mari dapatkan semula pelanggan yang baru kami tambah dengan menggunakan kaedah get().

const getCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readonly');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.get(id);

    request.onsuccess = (event) => {
        const customer = event.target.result;
        if (customer) {
            console.log('Customer found:', customer);
        } else {
            console.log('Customer not found.');
        }
    };

    request.onerror = (event) => {
        console.error('Error fetching customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    getCustomer(db, 1); // Fetch customer with ID 1
};

Langkah 4: Mengemas kini Data dalam IndexedDB

Untuk mengemas kini rekod sedia ada, kita boleh menggunakan kaedah put(), yang berfungsi sama seperti add() tetapi menggantikan rekod jika kunci sudah wujud.

const updateCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.put(customer);

    request.onsuccess = () => {
        console.log('Customer updated:', customer);
    };

    request.onerror = (event) => {
        console.error('Error updating customer:', event.target.errorCode);
    };
}

const updatedCustomer = { id: 1, name: 'Jane Doe', email: 'jane@example.com' };

request.onsuccess = (event) => {
    const db = event.target.result;
    updateCustomer(db, updatedCustomer);
};

Langkah 5: Memadam Data daripada IndexedDB

Akhir sekali, untuk memadam rekod, gunakan kaedah delete().

const deleteCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.delete(id);

    request.onsuccess = () => {
        console.log('Customer deleted.');
    };

    request.onerror = (event) => {
        console.error('Error deleting customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    deleteCustomer(db, 1); // Delete customer with ID 1
};

Kesimpulan

IndexedDB ialah penyelesaian yang teguh untuk mengendalikan storan data pihak pelanggan, terutamanya dalam apl web yang mengutamakan luar talian. Dengan mengikuti panduan ini, anda telah mempelajari cara untuk:

• Buka dan buat pangkalan data
• Buat kedai objek
• Tambah, baca, kemas kini dan padam data

Dengan IndexedDB, anda boleh membina aplikasi web yang lebih berdaya tahan yang menyimpan data secara setempat dan berfungsi walaupun tanpa sambungan Internet.

Rujukan:

1. MDN Web Docs - IndexedDB API
   
   Panduan komprehensif tentang cara IndexedDB berfungsi, kaedah API dan kes penggunaannya.
   
   Panduan MDN IndexedDB

2. Pembangun Google - IndexedDB
   
   Artikel terperinci yang merangkumi amalan terbaik dan penggunaan IndexedDB untuk membina apl web berkemampuan luar talian.
   
   Pembangun Google - IndexedDB

3. API Pangkalan Data Terindeks W3C
   
   Spesifikasi rasmi daripada W3C yang menggariskan pelaksanaan teknikal dan struktur IndexedDB.
   
   Spesifikasi W3C IndexedDB

Sumber ini akan memberikan kedalaman dan konteks tambahan jika anda ingin meneroka lebih lanjut tentang IndexedDB di luar tutorial ini!

Selamat pengekodan!

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