Οι κοινές λύσεις αποθήκευσης δεδομένων front-end περιλαμβάνουν κυρίως:cookie, αποθήκευση ιστού, ευρετηριασμένη DB, WebSQL, τοπική αποθήκευση, αποθήκευση συνεδρίαςκ.λπ., για παράδειγμα:
| χαρακτηριστικός | μπισκότο | localΑποθήκευση | συνεδρίαΑποθήκευση | ευρετηριασμένηDB | | Κύκλος ζωής δεδομένων | Γενικά δημιουργείται από τον διακομιστή, ο χρόνος λήξης μπορεί να οριστεί. Μπορούν επίσης να δημιουργηθούν στοιχεία όπως η υιοθέτηση front-end και το js-cookie | Αν δεν καθαριστεί, είναι πάντα εκεί. Όταν το πρόγραμμα περιήγησης είναι κλειστό, αποθηκεύεται επίσης τοπικά, αλλά το cross-browser δεν υποστηρίζεται | Ο καθαρισμός και η ανανέωση της σελίδας θα εξακολουθούν να υπάρχουν όταν η σελίδα είναι κλειστή και η αλληλεπίδραση μεταξύ σελίδων δεν υποστηρίζεται | Αν δεν καθαριστεί, υπήρχε πάντα | | Μέγεθος χώρου αποθήκευσης δεδομένων | 4Κ | 5Λ | 5Λ | Χωρίς όριο μεγέθους | | Επικοινωνήστε με τον διακομιστή | Μεταφέρεται στην κεφαλίδα που ζητήθηκε κάθε φορά, γεγονός που έχει αντίκτυπο στην απόδοση του αιτήματος. Ταυτόχρονα, επειδή περιλαμβάνεται στο αίτημα, είναι επιρρεπές και σε θέματα ασφάλειας | Δεν συμμετέχω | Δεν συμμετέχω | Δεν συμμετέχω | | ιδιορρυθμία | Τα ζεύγη κλειδιού-τιμής συμβολοσειράς αποθηκεύουν δεδομένα τοπικά | Τα ζεύγη κλειδιού-τιμής συμβολοσειράς αποθηκεύουν δεδομένα τοπικά | Τα ζεύγη κλειδιού-τιμής συμβολοσειράς αποθηκεύουν δεδομένα τοπικά | Το IndexedDB είναι μια μη σχεσιακή βάση δεδομένων (οι λειτουργίες μέσω δηλώσεων SQL δεν υποστηρίζονται). Μπορεί να αποθηκεύσει μεγάλες ποσότητες δεδομένων, να παρέχει διεπαφές για ερωτήματα και να δημιουργήσει ευρετήρια, τα οποία άλλες λύσεις αποθήκευσης δεν μπορούν να παρέχουν. |
ΕυρετηριασμένοDB
Αυτό το άρθρο περιγράφει κυρίως τη χρήση του IndexedDB για αποθήκευση στο front-end και παρουσιάζεται ως εξής:
Το IndexedDB είναι ένα υποκείμενο API για την αποθήκευση μεγάλων ποσοτήτων δομημένων δεδομένων (επίσης αρχείων/δυαδικών μεγάλων αντικειμένων (blob)) από την πλευρά του πελάτη. Το API χρησιμοποιεί ευρετήρια για να επιτρέψει αναζητήσεις δεδομένων υψηλής απόδοσης. Ενώ το Web Storage είναι χρήσιμο για την αποθήκευση μικρότερων ποσοτήτων δεδομένων, δεν είναι τόσο καλό όσο η αποθήκευση μεγαλύτερων ποσοτήτων δομημένων δεδομένων. Το IndexedDB παρέχει μια λύση για αυτό το σενάριο. Αυτή η σελίδα είναι η κύρια σελίδα οδηγού για το MDN IndexedDB - εδώ, παρέχουμε μια πλήρη αναφορά API και οδηγό χρήσης, λεπτομέρειες υποστήριξης προγράμματος περιήγησης και συνδέσμους προς ορισμένες επεξηγήσεις βασικών εννοιών. Το IndexedDB έχει τα ακόλουθα χαρακτηριστικά:
(1) Αποθήκευση ζεύγους κλειδιού-τιμής. Το IndexedDB χρησιμοποιεί έναν χώρο αποθήκευσης αντικειμένων για την αποθήκευση δεδομένων. Όλοι οι τύποι δεδομένων μπορούν να κατατεθούν απευθείας, συμπεριλαμβανομένων των αντικειμένων JavaScript. Στο αποθετήριο αντικειμένων, τα δεδομένα αποθηκεύονται με τη μορφή "ζευγών κλειδιών-τιμών" και κάθε εγγραφή δεδομένων έχει ένα αντίστοιχο πρωτεύον κλειδί, το οποίο είναι μοναδικό και δεν μπορεί να αντιγραφεί, διαφορετικά θα εμφανιστεί σφάλμα.
(2) Ασύγχρονη. Το IndexedDB δεν κλειδώνει το πρόγραμμα περιήγησης και ο χρήστης μπορεί να εκτελέσει άλλες λειτουργίες, σε αντίθεση με το LocalStorage, το οποίο λειτουργεί συγχρονισμένα. Ο ασύγχρονος σχεδιασμός είναι να αποτρέπει την ανάγνωση και την εγγραφή μεγάλων ποσοτήτων δεδομένων, επιβραδύνοντας την απόδοση των ιστοσελίδων.
(3) Θέματα υποστήριξης. Το IndexedDB υποστηρίζει συναλλαγές, πράγμα που σημαίνει ότι εάν ένα από τα βήματα λειτουργίας αποτύχει, ολόκληρη η συναλλαγή θα ακυρωθεί και η βάση δεδομένων θα επανέλθει στην κατάσταση πριν από την πραγματοποίηση της συναλλαγής και δεν υπάρχει περίπτωση επανεγγραφής μόνο μέρους των δεδομένων.
(4) Περιορισμός ομολογίας. Το IndexedDB υπόκειται στο ίδιο όριο προέλευσης και κάθε βάση δεδομένων αντιστοιχεί στο όνομα τομέα που το δημιούργησε. Οι ιστοσελίδες μπορούν να έχουν πρόσβαση σε βάσεις δεδομένων μόνο με τα δικά τους ονόματα τομέα και όχι σε βάσεις δεδομένων μεταξύ τομέων.
(5) Μεγάλος αποθηκευτικός χώρος. Το IndexedDB έχει πολύ μεγαλύτερο αποθηκευτικό χώρο από το LocalStorage, γενικά όχι λιγότερο από 250 MB και δεν υπάρχει ανώτατο όριο.
(6) Υποστήριξη δυαδικής αποθήκευσης. Το IndexedDB μπορεί να αποθηκεύσει όχι μόνο συμβολοσειρές αλλά και δυαδικά δεδομένα (αντικείμενα ArrayBuffer και αντικείμενα Blob).
Εάν είναι δύσκολο να ξεκινήσετε απευθείας με το IndexedDB και πρέπει να το ενσωματώσετε μόνοι σας, μπορείτε να χρησιμοποιήσετε ορισμένα συσκευασμένα πακέτα, ως εξής:
- localForage: Ένα απλό Polyfill που παρέχει μια απλή σύνταξη τιμών για χώρους αποθήκευσης δεδομένων από την πλευρά του πελάτη. Χρησιμοποιεί το IndexedDB στο παρασκήνιο και επιστρέφει στο WebSQL ή στο localStorage σε προγράμματα περιήγησης που δεν υποστηρίζουν το IndexedDB.
- Dexie.js: Τα περιτυλίγματα του IndexedDB επιτρέπουν ταχύτερη ανάπτυξη κώδικα μέσω απλής σύνταξης.
- ZangoDB: Μια διεπαφή IndexedDB παρόμοια με MongoDB, που υποστηρίζει τις περισσότερες από τις γνωστές λειτουργίες φιλτραρίσματος, προβολής, ταξινόμησης, ενημέρωσης και συγκέντρωσης του MongoDB.
- JsStore: Ένα περιτύλιγμα IndexedDB με σύνταξη SQL.
- MiniMongo: MongoDB στη μνήμη πελάτη που υποστηρίζεται από τοπική αποθήκευση, συγχρονισμός διακομιστή μέσω http. Το MeteorJS χρησιμοποιεί το MiniMongo.
- PouchDB: Ένας πελάτης που υλοποιεί το CouchDB στο πρόγραμμα περιήγησης χρησιμοποιώντας το IndexedDB.
- idb: Μια μικροσκοπική (〜1.15k) βιβλιοθήκη με το μεγαλύτερο μέρος του API παρόμοιο με το IndexedDB, αλλά με κάποιες μικρές βελτιώσεις που βελτιώνουν σημαντικά τη χρηστικότητα της βάσης δεδομένων.
- idb-keyval: Εξαιρετικά απλή και μικρή (~600B) αποθήκευση ζεύγους κλειδιών-τιμών βάσει υποσχέσεων που υλοποιείται με το IndexedDB.
- sifrr-storage: Μια πολύ μικρή (~2kB) βάση δεδομένων κλειδιού-τιμής από την πλευρά του πελάτη που βασίζεται σε υποσχέσεις. Υλοποιείται με βάση τα IndexedDB, localStorage, WebSQL και Cookies. Μπορεί να επιλέξει αυτόματα τις υποστηριζόμενες βάσεις δεδομένων που αναφέρονται παραπάνω και να τις χρησιμοποιήσει με σειρά προτεραιότητας.
- lovefield: Το Lovefield είναι μια σχεσιακή βάση δεδομένων για εφαρμογές ιστού, γραμμένη σε JavaScript, μπορεί να εκτελεστεί σε διαφορετικά περιβάλλοντα προγράμματος περιήγησης και παρέχει ένα API που μοιάζει με SQL που είναι γρήγορο, ασφαλές και εύκολο στη χρήση.
τοπικήΚτηνοτροφία
Το localForage είναι ένα γρήγορο και απλό αποθετήριο JavaScript. Το localForage βελτιώνει την εμπειρία εκτός σύνδεσης των εφαρμογών Ιστού χρησιμοποιώντας ασύγχρονη αποθήκευση (IndexedDB ή WebSQL) και ένα απλό API παρόμοιο με το localStorage. Το localForage χρησιμοποιεί localStorage σε προγράμματα περιήγησης που δεν διαθέτουν υποστήριξη IndexedDB ή WebSQL.
Διεύθυνση GitHub:Η σύνδεση με υπερσύνδεσμο είναι ορατή. Κινέζικο φροντιστήριο:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Το localForage παρέχει δύο διαφορετικά αρχεία js, οι διαφορές είναι οι εξής:
localforage.js: μια βιβλιοθήκη Promise που περιέχει την υλοποίηση lie (Η σύνδεση με υπερσύνδεσμο είναι ορατή.), το αρχείο είναι σχετικά μεγάλο και η σύνταξη υπόσχεσης μπορεί να χρησιμοποιηθεί σε παλαιότερα προγράμματα περιήγησης.
localforage.nopromises.js: Δεν υπάρχει εφαρμογή του Promise, υποστηρίζονται μόνο νέες εκδόσεις προγραμμάτων περιήγησης.
Κωδικός δοκιμής:
(Τέλος)
|