Πώς να χρησιμοποιήσετε το IndexedDB ως βάση δεδομένων

Το IndexedDB είναι μια βάση δεδομένων NoSQL από την πλευρά του πελάτη που σας επιτρέπει να αποθηκεύετε και να ανακτάτε δομημένα δεδομένα μέσα στο πρόγραμμα περιήγησης ιστού ενός χρήστη.

Το IndexedDB παρέχει πολλά πλεονεκτήματα, όπως μεγαλύτερη μνήμη και αποθήκευση δεδομένων εκτός σύνδεσης και ανάκτηση σε σχέση με άλλες επιλογές αποθήκευσης, όπως το localStorage. Εδώ θα μάθετε πώς να χρησιμοποιείτε το IndexedDB ως βάση δεδομένων.

Ρύθμιση της βάσης δεδομένων σας

Για να δημιουργήσετε τη βάση δεδομένων, πρέπει να δημιουργήσετε ένα ανοιχτό αίτημα χρησιμοποιώντας το IndexedDB Άνοιξε μέθοδος. ο Άνοιξε μέθοδος επιστρέφει an IDBOpenDBRαίτημα αντικείμενο. Αυτό το αντικείμενο παρέχει πρόσβαση στο επιτυχία, λάθος, και αναβαθμισμένογεγονότα που εκπέμπονται από την ανοιχτή λειτουργία.

ο Άνοιξε

Η μέθοδος παίρνει δύο ορίσματα: ένα όνομα και έναν προαιρετικό αριθμό έκδοσης. Το όρισμα όνομα αντιπροσωπεύει το όνομα της βάσης δεδομένων σας. Ο αριθμός έκδοσης καθορίζει την έκδοση της βάσης δεδομένων με την οποία αναμένεται να λειτουργήσει η εφαρμογή σας. Η προεπιλεγμένη τιμή είναι μηδέν.

Δείτε πώς μπορείτε να δημιουργήσετε ένα ανοιχτό αίτημα:

συνθ openRequest = indexedDB.open("usersdb", 1);

Αφού δημιουργήσετε το ανοιχτό αίτημα, πρέπει να ακούσετε και χειριστεί τα γεγονότα στο επιστρεφόμενο αντικείμενο.

ο επιτυχία Το συμβάν εμφανίζεται όταν δημιουργείτε με επιτυχία τη βάση δεδομένων. Μόλις εκπέμπεται, αποκτάτε πρόσβαση στο αντικείμενο της βάσης δεδομένων σας μέσω συμβάν.στόχος.αποτέλεσμα:

openRequest.onsuccess = λειτουργία (Εκδήλωση) {
συνθ db = event.target.result;
κονσόλα.κούτσουρο("Δημιουργήθηκε βάση δεδομένων", db);
};

Το παραπάνω παράδειγμα χειρίζεται ένα συμβάν επιτυχίας καταγράφοντας το αντικείμενο της βάσης δεδομένων.

ο λάθος Συμβάν προκύπτει εάν το IndexedDB αντιμετωπίσει πρόβλημα κατά τη δημιουργία της βάσης δεδομένων. Μπορείτε να το χειριστείτε καταγράφοντας το σφάλμα στην κονσόλα ή χρησιμοποιώντας άλλο μέθοδοι χειρισμού σφαλμάτων:

openRequest.onerror = λειτουργία (Εκδήλωση) {
// ...
};

ο αναβαθμισμένο Το συμβάν εμφανίζεται όταν δημιουργείτε τη βάση δεδομένων για πρώτη φορά ή όταν ενημερώνετε την έκδοσή της. Πυροδοτεί μόνο μία φορά, καθιστώντας το το ιδανικό μέρος για να δημιουργήσετε ένα κατάστημα αντικειμένων.

Δημιουργία καταστήματος αντικειμένων

Ένας χώρος αποθήκευσης αντικειμένων είναι παρόμοιος με έναν πίνακα σε σχεσιακές βάσεις δεδομένων από την πλευρά του διακομιστή. Μπορείτε να χρησιμοποιήσετε έναν χώρο αποθήκευσης αντικειμένων για να αποθηκεύσετε ζεύγη κλειδιών-τιμών.

Θα πρέπει να δημιουργήσετε αποθήκες αντικειμένων ως απόκριση στο αναβαθμισμένο Εκδήλωση. Αυτό το συμβάν ενεργοποιείται όταν δημιουργείτε μια νέα έκδοση της βάσης δεδομένων ή αναβαθμίζετε μια υπάρχουσα έκδοση. Αυτό διασφαλίζει ότι η βάση δεδομένων έχει διαμορφωθεί σωστά και ενημερωμένη προτού προσθέσετε δεδομένα.

Μπορείτε να δημιουργήσετε ένα κατάστημα αντικειμένων χρησιμοποιώντας το createObjectStore μέθοδο, στην οποία μπορείτε να αποκτήσετε πρόσβαση σε μια αναφορά της βάσης δεδομένων σας. Αυτή η μέθοδος παίρνει το όνομα του χώρου αποθήκευσης αντικειμένων και ένα αντικείμενο διαμόρφωσης ως ορίσματα.

Στο αντικείμενο διαμόρφωσης, πρέπει να ορίσετε ένα πρωτεύον κλειδί. Μπορείτε να ορίσετε ένα πρωτεύον κλειδί ορίζοντας μια διαδρομή κλειδιού, η οποία είναι μια ιδιότητα που υπάρχει πάντα και περιέχει μια μοναδική τιμή. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε μια γεννήτρια κλειδιών ρυθμίζοντας το keyPath ιδιοκτησία σε «ταυτότητα" και το αυτόματη αύξηση ιδιοκτησία σε αληθής στο αντικείμενο διαμόρφωσής σας.

Για παράδειγμα:

openRequest.onupgradeneeded = λειτουργία (Εκδήλωση) {
συνθ db = event.target.result;
// Δημιουργία αποθήκευσης αντικειμένων
συνθ userObjectStore = db.createObjectStore("userStore", {
 KeyPath: "ταυτότητα",
 αυτόματη αύξηση: αληθής,
 });
}

Αυτό το παράδειγμα δημιουργεί έναν χώρο αποθήκευσης αντικειμένων με το όνομα "userStore" στη βάση δεδομένων σας και ορίζει το πρωτεύον κλειδί του σε ένα αναγνωριστικό αυτόματης αύξησης.

Καθορισμός δεικτών

Στο IndexedDB, ένα ευρετήριο είναι ένας τρόπος οργάνωσης και ανάκτησης δεδομένων πιο αποτελεσματικά. Αυτό σας επιτρέπει να κάνετε αναζήτηση στο χώρο αποθήκευσης αντικειμένων και να το ταξινομήσετε με βάση τις ιδιότητες ευρετηρίου.

Για να ορίσετε ένα ευρετήριο σε ένα χώρο αποθήκευσης αντικειμένων, χρησιμοποιήστε το createIndex() μέθοδος ενός αντικειμένου αποθήκευσης αντικειμένων. Αυτή η μέθοδος παίρνει ένα όνομα ευρετηρίου, ένα όνομα ιδιότητας και ένα αντικείμενο διαμόρφωσης ως ορίσματα:

userObjectStore.createIndex("όνομα", "όνομα", { μοναδικός: ψευδής });
userObjectStore.createIndex("ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ", "ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ", { μοναδικός: αληθής });

Αυτό το μπλοκ κώδικα παραπάνω ορίζει δύο ευρετήρια, "όνομα" και "email" στο userObjectStore. Το ευρετήριο "όνομα" δεν είναι μοναδικό, που σημαίνει ότι πολλά αντικείμενα μπορούν να έχουν την ίδια τιμή ονόματος, ενώ το ευρετήριο "email" είναι μοναδικό, διασφαλίζοντας ότι κανένα αντικείμενο δεν μπορεί να έχει την ίδια τιμή email.

Ακολουθεί ένα πλήρες παράδειγμα για το πώς μπορείτε να χειριστείτε ένα αναβαθμισμένο Εκδήλωση:

openRequest.onupgradeneeded = λειτουργία (Εκδήλωση) {
συνθ db = event.target.result;
// Δημιουργία αποθήκευσης αντικειμένων
συνθ userObjectStore = db.createObjectStore("userStore", {
 KeyPath: "ταυτότητα",
 αυτόματη αύξηση: αληθής,
 }); 
// Δημιουργία ευρετηρίων
 userObjectStore.createIndex("όνομα", "όνομα", { μοναδικός: ψευδής });
 userObjectStore.createIndex("ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ", "ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ", { μοναδικός: αληθής });
};

Προσθήκη δεδομένων στο IndexedDB

Μια συναλλαγή στο IndexedDB είναι ένας τρόπος ομαδοποίησης πολλαπλών λειτουργιών ανάγνωσης και εγγραφής σε μια μεμονωμένη λειτουργία. Για να διασφαλιστεί η συνέπεια και η ακεραιότητα των δεδομένων, εάν μια από τις λειτουργίες σε μια συναλλαγή αποτύχει, το IndexedDB επαναφέρει όλες τις λειτουργίες.

Για να προσθέσετε δεδομένα σε μια βάση δεδομένων IndexedDB, πρέπει να δημιουργήσετε μια συναλλαγή στο χώρο αποθήκευσης αντικειμένων που θέλετε να προσθέσετε τα δεδομένα και στη συνέχεια να χρησιμοποιήσετε το Προσθήκη() μέθοδος στη συναλλαγή για να προσθέσετε τα δεδομένα.

Μπορείτε να δημιουργήσετε μια συναλλαγή καλώντας το συναλλαγή μέθοδο στο αντικείμενο της βάσης δεδομένων σας. Αυτή η μέθοδος παίρνει δύο ορίσματα: Το όνομα(α) του χώρου αποθήκευσης δεδομένων σας και τον τρόπο της συναλλαγής, που μπορεί να είναι μόνο για ανάγνωση (προεπιλογή) ή διαβάζω γράφω.

Στη συνέχεια, καλέστε το objectStore() μέθοδο στη συναλλαγή και μεταβιβάστε το όνομα του χώρου αποθήκευσης αντικειμένων στο οποίο θέλετε να προσθέσετε δεδομένα. Αυτή η μέθοδος επιστρέφει μια αναφορά στο χώρο αποθήκευσης αντικειμένων.

Τέλος, καλέστε το Προσθήκη() μέθοδος στο αντικείμενο αποθηκεύει και διαβιβάζει τα δεδομένα που θέλετε να προσθέσετε:

συνθ addUserData = (UserData, db) => {
// Άνοιγμα συναλλαγής
συνθ συναλλαγή = db.transaction("userStore", "διαβάζω γράφω");
// Προσθήκη δεδομένων στο χώρο αποθήκευσης αντικειμένων
συνθ userObjectStore =transaction.objectStore("userStore");
// Κάντε ένα αίτημα για προσθήκη δεδομένων χρήστη
συνθ request = userObjectStore.add (userData);
// Χειριστείτε μια εκδήλωση επιτυχίας
 αίτημα.επιτυχία = λειτουργία (Εκδήλωση) {
//...
 };
// Χειριστείτε ένα σφάλμα
 αίτημα.έναλάθος = λειτουργία (Εκδήλωση) {
//...
 };
};

Αυτή η συνάρτηση δημιουργεί μια συναλλαγή με το αντικείμενο αποθήκευσης "userStore" και ορίζει τη λειτουργία σε "readwrite". Στη συνέχεια, παίρνει το χώρο αποθήκευσης αντικειμένων και προσθέτει το δεδομένα χρήστη σε αυτό χρησιμοποιώντας το Προσθήκη μέθοδος.

Ανάκτηση δεδομένων από το IndexedDB

Για να ανακτήσετε δεδομένα από μια βάση δεδομένων IndexedDB, πρέπει να δημιουργήσετε μια συναλλαγή στο χώρο αποθήκευσης αντικειμένων από τον οποίο θέλετε να ανακτήσετε τα δεδομένα και στη συνέχεια να χρησιμοποιήσετε το παίρνω() ή Πάρτα ολα() μέθοδος στη συναλλαγή για να ανακτήσετε τα δεδομένα ανάλογα με τον όγκο των δεδομένων που θέλετε να ανακτήσετε.

ο παίρνω() μέθοδος παίρνει μια τιμή για το πρωτεύον κλειδί του αντικειμένου που θέλετε να ανακτήσετε και επιστρέφει το αντικείμενο με το αντίστοιχο κλειδί από το χώρο αποθήκευσης αντικειμένων σας.

ο Πάρτα ολα() μέθοδος επιστρέφει όλα τα δεδομένα σε ένα χώρο αποθήκευσης αντικειμένων. Λαμβάνει επίσης έναν προαιρετικό περιορισμό ως όρισμα και επιστρέφει όλα τα δεδομένα που ταιριάζουν από το χώρο αποθήκευσης.

συνθ getUserData = (id, db) => {
συνθ συναλλαγή = db.transaction("userStore", "μόνο για ανάγνωση");
συνθ userObjectStore =transaction.objectStore("userStore");
// Κάντε ένα αίτημα για λήψη των δεδομένων
συνθ request = userObjectStore.get (id);
 αίτημα.επιτυχία = λειτουργία (Εκδήλωση) {
κονσόλα.log (request.result);
 };
 αίτημα.έναλάθος = λειτουργία (Εκδήλωση) {
// Χειρισμός σφάλματος
 };
};

Αυτή η συνάρτηση δημιουργεί μια συναλλαγή με το αντικείμενο αποθήκευσης "userStore" και ορίζει τη λειτουργία σε "μόνο για ανάγνωση". Στη συνέχεια ανακτά δεδομένα χρήστη με το αντίστοιχο αναγνωριστικό από το χώρο αποθήκευσης αντικειμένων.

Ενημέρωση δεδομένων με το IndexedDB

Για να ενημερώσετε δεδομένα στο IndexedDB, πρέπει να δημιουργήσετε μια συναλλαγή με τη λειτουργία "readwrite". Συνεχίστε ανακτώντας το αντικείμενο που θέλετε να ενημερώσετε χρησιμοποιώντας το παίρνω() μέθοδος. Στη συνέχεια, τροποποιήστε το αντικείμενο και καλέστε το βάζω() μέθοδο αποθήκευσης αντικειμένων για να αποθηκεύσετε το ενημερωμένο αντικείμενο πίσω στη βάση δεδομένων.

συνθ updateUserData = (id, userData, db) => {
συνθ συναλλαγή = db.transaction("userStore", "διαβάζω γράφω");
συνθ userObjectStore =transaction.objectStore("userStore");
// Κάντε ένα αίτημα για λήψη των δεδομένων
συνθ getRequest = userObjectStore.get (id);
// Χειριστείτε μια εκδήλωση επιτυχίας
 getRequest.onsuccess = λειτουργία (Εκδήλωση) {
// Λάβετε τα παλιά δεδομένα χρήστη
συνθ χρήστης = event.target.result;
// Ενημερώστε τα δεδομένα χρήστη
 user.name = userData.name;
 user.email = userData.email;
// Κάντε ένα αίτημα για ενημέρωση των δεδομένων
συνθ putRequest = userObjectStore.put (χρήστης);
 putRequest.onsuccess = λειτουργία (Εκδήλωση) {
// Χειριστείτε την επιτυχία
 };
 putRequest.onerror = λειτουργία (Εκδήλωση) {
// Χειρισμός σφάλματος
 };
 };
 getRequest.onerror = λειτουργία (Εκδήλωση) {
// Χειρισμός σφάλματος
 };
};

Αυτή η συνάρτηση δημιουργεί μια συναλλαγή για τη λήψη και ενημέρωση των δεδομένων της βάσης δεδομένων σας.

Διαγραφή δεδομένων από το IndexedDB

Για να διαγράψετε δεδομένα από το IndexedDB, πρέπει να δημιουργήσετε μια συναλλαγή με τη λειτουργία "readwrite". Στη συνέχεια καλέστε το διαγράφω() μέθοδος στο χώρο αποθήκευσης αντικειμένων για την κατάργηση του αντικειμένου από τη βάση δεδομένων:

συνθ deleteUserData = (id, db) => {
συνθ συναλλαγή = db.transaction("userStore", "διαβάζω γράφω");
συνθ userObjectStore =transaction.objectStore("userStore");
// Κάντε ένα αίτημα διαγραφής των δεδομένων
συνθ request = userObjectStore.delete (id);
 αίτημα.επιτυχία = λειτουργία (Εκδήλωση) {
// Χειριστείτε την επιτυχία
 };
 αίτημα.έναλάθος = λειτουργία (Εκδήλωση) {
// Χειρισμός σφάλματος
 };
};

Αυτή η συνάρτηση δημιουργεί μια συναλλαγή που διαγράφει τα δεδομένα με το αντίστοιχο αναγνωριστικό από το χώρο αποθήκευσης αντικειμένων σας.

Πρέπει να χρησιμοποιήσετε IndexedDB ή localStorage;

Η επιλογή μεταξύ του IndexedDB και άλλων βάσεων δεδομένων από την πλευρά του πελάτη, όπως το localStorage, εξαρτάται από τις απαιτήσεις της εφαρμογής σας. Χρησιμοποιήστε το localStorage για απλή αποθήκευση μικρών ποσοτήτων δεδομένων. Επιλέξτε IndexedDB για μεγάλα σύνολα δομημένων δεδομένων που απαιτούν ερωτήματα και φιλτράρισμα.