Τι είναι το AsyncStorage στο React Native και πώς να το χρησιμοποιήσετε;

Το AsyncStorage του React Native κάνει την αποθήκευση και τη διατήρηση δεδομένων σε μια εφαρμογή React Native απλή. Με το AsyncStorage API, μπορείτε να χειρίζεστε απλές περιπτώσεις μικρών δεδομένων εντός της εφαρμογής σας χωρίς να χρειάζεστε τον τοπικό χώρο αποθήκευσης της συσκευής ή τα πολύπλοκα συστήματα αποθήκευσης.

Τι είναι το AsyncStorage του React Native;

Το AsyncStorage API είναι ένα μόνιμο σύστημα αποθήκευσης κλειδιών-τιμών. Το API υποστηρίζει μια σειρά από Τύποι δεδομένων JavaScript, συμπεριλαμβανομένων των αντικειμένων συμβολοσειράς, boolean, αριθμού και JSON.

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

Τι πρόβλημα επιλύει το AsyncStorage;

Πριν από την εμφάνιση του AsyncStorage, η σωστή αποθήκευση δεδομένων ήταν μια αναξιόπιστη προσπάθεια. Θα μπορούσατε είτε να αποθηκεύσετε δεδομένα σε τοπικό χώρο αποθήκευσης, ο οποίος δεν μπορεί να διατηρηθεί στα δεδομένα όταν κλείνει η εφαρμογή σας, είτε θα μπορούσατε να αποθηκεύσετε τα δεδομένα σε ένα Σύστημα Διαχείρισης Βάσεων Δεδομένων Σχέσεων (RDBMS). Αλλά είναι πολύ περίπλοκα για να λειτουργήσουν για αυτήν την περίπτωση χρήσης.

Το AsyncStorage επιλύει αυτά τα προβλήματα παρέχοντας έναν απλό, αξιόπιστο τρόπο αποθήκευσης μικρών και προσωρινών δεδομένων σε εφαρμογές React Native.

Για την αποθήκευση δεδομένων με το AsyncStorage, τα δεδομένα πρώτα σειριοποιούνται σε μια συμβολοσειρά JSON. Στη συνέχεια, η συμβολοσειρά JSON αποθηκεύεται σε ένα σύστημα κλειδιού-τιμής. Όταν επιχειρείτε να ανακτήσετε δεδομένα από το AsyncStorage, τα δεδομένα δεσμεύονται από το JSON και στη συνέχεια επιστρέφονται σε εσάς στην αρχική τους μορφή.

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

Μέθοδοι AsyncStorage

Για να εγκαταστήσετε το react-native-async-storage πακέτο, εκτελέστε την ακόλουθη εντολή μέσα στο τερματικό του έργου σας:

npm εγκατάσταση @react-native-async-storage/async-storage

Δεδομένου ότι το AsyncStorage είναι ασύγχρονο στη φύση, οι μέθοδοί του δεν θα επιστρέψουν άμεσα αποτελέσματα. Αντίθετα, επιστρέφουν μια υπόσχεση που επιλύεται όταν ολοκληρωθεί η λειτουργία.

Θα πρέπει να χρησιμοποιήσετε το ασυγχρονισμός/αναμονή σύνταξη ή παρόμοια τεχνική κατά την κλήση μεθόδων AsyncStorage.

Γράψτε δεδομένα χρησιμοποιώντας τις μεθόδους setItem() και multiSet().

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

Η μέθοδος θα επέστρεφε μια υπόσχεση που επιλύεται με μια δυαδική τιμή που υποδεικνύει εάν η λειτουργία ήταν επιτυχής ή απορρίπτεται με σφάλμα εάν η λειτουργία αποτύχει:

// Αποθήκευση τιμής για το κλειδί "user"
αναμένω AsyncStorage.setItem('χρήστης', 'Γιάννης');
// Αποθήκευση πολλαπλών τιμών για το κλειδί "user"
αναμένω AsyncStorage.multiSet(['χρήστης', 'Γιάννης', 'ελαφίνα']);

Ανάγνωση δεδομένων χρησιμοποιώντας τις μεθόδους getItem() και multiGet().

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

συνθ όνομα = αναμένω AsyncStorage.getItem('χρήστης');

Η τιμή που επιστράφηκε από getItem() είναι μια χορδή. Εάν χρειάζεται να αποθηκεύσετε δεδομένα σε άλλη μορφή, μπορείτε να χρησιμοποιήσετε JSON.stringify() για να μετατρέψετε τα δεδομένα σε συμβολοσειρά πριν τα αποθηκεύσετε. Στη συνέχεια χρησιμοποιήστε JSON.parse() για να μετατρέψετε τη συμβολοσειρά πίσω στον αρχικό τύπο δεδομένων κατά την ανάκτησή της.

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

// Αποθηκεύστε το αντικείμενο {name: "John Doe", ηλικία: 30} για το κλειδί "user"
αναμένω AsyncStorage.setItem('χρήστης', JSON.stringify({όνομα: "John Doe", ηλικία: 30}));
// Λήψη του αντικειμένου για το κλειδί "χρήστης"
συνθ χρήστης = JSON.αναλύω λέξη(αναμένω AsyncStorage.getItem('χρήστης'));

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

Συγχώνευση δεδομένων Χρησιμοποιώντας τις μεθόδους mergeItem() και multiMerge().

ο mergeItem() και multiMerge() Οι μέθοδοι συγχωνεύουν τη δεδομένη τιμή με την υπάρχουσα τιμή για το δεδομένο κλειδί. Η τιμή μεταβιβάστηκε σε mergeItem() μπορεί να είναι οποιοδήποτε είδος δεδομένων. Ωστόσο, είναι σημαντικό να σημειωθεί ότι το AsyncStorage δεν κρυπτογραφεί τα δεδομένα, επομένως οποιοσδήποτε έχει πρόσβαση στη συσκευή μπορεί να διαβάσει τα δεδομένα:

αναμένω AsyncStorage.mergeItem('όνομα', 'Jane Doe');

mergeItem() παίρνει το κλειδί για την τιμή που θέλετε να συγχωνεύσετε και τη νέα τιμή που θέλετε να συγχωνεύσετε με την υπάρχουσα τιμή του κλειδιού. Χρήση multiMerge() για να συγχωνεύσετε περισσότερα από ένα στοιχεία σε μια βασική τιμή.

Εκκαθάριση αποθήκευσης Χρησιμοποιώντας τη μέθοδο clear().

ο Σαφή() Η μέθοδος σάς επιτρέπει να αφαιρέσετε όλα τα στοιχεία που είναι αποθηκευμένα στο AsyncStorage. Μπορεί να είναι χρήσιμο σε διάφορα σενάρια, όπως όταν χρειάζεται να επαναφέρετε την κατάσταση της εφαρμογής κατά τη διάρκεια αποσύνδεσης χρήστη ή διαγράψτε τα αποθηκευμένα δεδομένα στο κινητό σας τηλέφωνο.

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

συνθ clearData = ασυγχρονισμός () => {
δοκιμάστε {
αναμένω AsyncStorage.clear();

 } σύλληψη (ε) {
κονσόλα.σφάλμα (ε);
 }
};

Ο παραπάνω κώδικας θα διαγράψει όλα τα ζεύγη κλειδιών-τιμών που είναι αποθηκευμένα στο AsyncStorage.

Επιπλέον, μπορείτε να παρέχετε μια λειτουργία επανάκλησης σε Σαφή(), το οποίο θα γίνει επίκληση μόλις ολοκληρωθεί η λειτουργία:

AsyncStorage.clear()
 .έπειτα(() => {
// Ολοκληρώθηκε η εκκαθάριση

 })
 .σύλληψη((λάθος) => {
κονσόλα.λάθος (σφάλμα);
 });

Σημειώστε ότι το Σαφή() Η μέθοδος θα διαγράψει οριστικά όλα τα δεδομένα που είναι αποθηκευμένα στο AsyncStorage.

Προσωρινή αποθήκευση δεδομένων με AsyncStorage

Η αποθήκευση δεδομένων στην κρυφή μνήμη είναι μια κοινή πρακτική στην ανάπτυξη εφαρμογών για κινητά για τη βελτίωση της απόδοσης και τη μείωση των αιτημάτων δικτύου. Με το AsyncStorage, μπορείτε εύκολα να αποθηκεύσετε δεδομένα στην κρυφή μνήμη σε εφαρμογές React Native.

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

Ας υποθέσουμε ότι έχετε μια εφαρμογή που εμφανίζει μια λίστα βιβλίων που έχουν ληφθεί από ένα API. Για να βελτιώσετε την απόδοση, μπορείτε να αποθηκεύσετε τα δεδομένα του βιβλίου που ανακτήθηκαν χρησιμοποιώντας το AsyncStorage.

Ακολουθεί ένα παράδειγμα υλοποίησης αυτού:

συνθ [βιβλία, setBooks] = useState([]);
useEffect(() => {
συνθ fetchBooks = ασυγχρονισμός () => {
δοκιμάστε {
// Ελέγξτε εάν υπάρχουν τα αποθηκευμένα δεδομένα
συνθ cachedData = αναμένω AsyncStorage.getItem("cachedBooks");
αν (cachedData !== μηδενικό) {
// Εάν υπάρχουν τα αποθηκευμένα δεδομένα, αναλύστε και ορίστε τα ως αρχική κατάσταση
 setbooks(JSON.parse (cachedData));
 } αλλού {
// Εάν τα αποθηκευμένα δεδομένα δεν υπάρχουν, ανακτήστε δεδομένα από το API
συνθ ανταπόκριση = αναμένω φέρω(' https://api.example.com/books');
συνθ δεδομένα = αναμένω answer.json();
// Αποθηκεύστε προσωρινά τα δεδομένα που ανακτήθηκαν
αναμένω AsyncStorage.setItem("cachedBooks", JSON.stringify (δεδομένα));
// Ορίστε τα δεδομένα που ανακτήθηκαν ως αρχική κατάσταση
 setBooks (δεδομένα);
 }
 } σύλληψη (λάθος) {
κονσόλα.λάθος (σφάλμα);
 }
 };
 fetchBooks();
 }, []);

Σε αυτό το παράδειγμα, χρησιμοποιείτε το useEffect γάντζο για να λάβετε τα δεδομένα του βιβλίου. Μέσα στο fetchBooks λειτουργία, ελέγξτε εάν υπάρχουν τα αποθηκευμένα δεδομένα καλώντας AsyncStorage.getItem('cachedBooks'). Εάν υπάρχουν τα αποθηκευμένα δεδομένα, αναλύστε τα χρησιμοποιώντας JSON.ανάλυση και ορίστε το ως αρχική κατάσταση χρησιμοποιώντας setBooks. Αυτό σας επιτρέπει να εμφανίσετε αμέσως τα αποθηκευμένα δεδομένα.

Εάν τα αποθηκευμένα δεδομένα δεν υπάρχουν, ανακτήστε τα δεδομένα από το API χρησιμοποιώντας τη μέθοδο fetch().. Μόλις επιστραφούν τα δεδομένα, αποθηκεύστε τα στην προσωρινή μνήμη καλώντας AsyncStorage.setItem(). Στη συνέχεια, ορίστε τα δεδομένα που έχουν ληφθεί ως αρχική κατάσταση, διασφαλίζοντας ότι οι περαιτέρω αποδόσεις θα εμφανίζουν τα δεδομένα που έχουν ληφθεί.

Τώρα μπορείτε να εμφανίσετε τα αποθηκευμένα βιβλία ως εξής:

εισαγωγή React, { useEffect, useState } από'αντιδρώ';
εισαγωγή { Προβολή, Κείμενο, ΕπίπεδηΛίστα } από'react-native';
εισαγωγή AsyncStorage από'@react-native-async-storage/async-storage';
συνθ Εφαρμογή = () => {
ΕΠΙΣΤΡΟΦΗ (

Λίστα βιβλίων</Text>
 data={βιβλία}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ item }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
εξαγωγήΠροκαθορισμένο Εφαρμογή?

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

Χρήση AsyncStorage για δυναμική φόρτωση δεδομένων

Το React Native AsyncStorage προσφέρει μια ισχυρή λύση για την αποθήκευση και την ανάκτηση δεδομένων. Αξιοποιώντας τις δυνατότητες προσωρινής αποθήκευσης, βελτιώνει την απόδοση και παρέχει ταχύτερη πρόσβαση στα αποθηκευμένα δεδομένα.

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