Αποθήκευση στο localStorage στο React

Εισαγωγή

Κατά την ανάπτυξη ελαφρών εφαρμογών – ίσως θέλουμε να αποθηκεύσουμε ορισμένα δεδομένα. Εάν μια βάση δεδομένων είναι υπερβολική - υπάρχει μια εξαιρετική εναλλακτική: localStorage!

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

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

Αποθήκευση δεδομένων σε localStorage στο React είναι πολύ εύκολο:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Αν δεν βιάζεστε και θέλετε να μάθετε περισσότερα για το πώς λειτουργεί αυτό, συνεχίστε να διαβάζετε!

Τι είναι τοπική αποθήκευση?

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

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

localStorage έχει ενσωματωμένες μεθόδους που μας επιτρέπουν να έχουμε πρόσβαση στο αντικείμενο αποθήκευσης του προγράμματος περιήγησης. Ένα παράδειγμα είναι το setItem() μέθοδο, η οποία μας επιτρέπει να προσθέσουμε ένα κλειδί και μια τιμή localStorage, επομένως μας επιτρέπει να αποθηκεύουμε δεδομένα. Άλλες μέθοδοι χρησιμοποιούνται για την ανάκτηση δεδομένων – getItem(), διαγραφή δεδομένων – removeItem(), τα καθαρίζω όλα localStorage περιπτώσεις - clear(), και ούτω καθεξής.

Αποθήκευση δεδομένων σε τοπική αποθήκευση Με την setItem() Μέθοδος

Η setItem() μέθοδος μας επιτρέπει να αποθηκεύουμε τιμές οποιουδήποτε τύπου δεδομένων σε localStorage εκχωρώντας τιμές σε κλειδιά, με αποτέλεσμα α ζεύγος κλειδιού-τιμής. Αυτό το κλειδί θα χρησιμοποιηθεί για την ανάκτηση της αντίστοιχης τιμής όποτε θέλουμε να την ανακτήσουμε localStorage.

Σημείωση: Για την αποθήκευση δεδομένων σε localStorage, πρέπει πρώτα να το μετατρέψουμε σε Συμβολοσειρά JSON χρησιμοποιώντας τα JSON.stringify() λειτουργία. Και όταν θέλουμε να το ανακτήσουμε, θα αναλύσουμε τα δεδομένα χρησιμοποιώντας JSON.parse(), μετατρέποντας τη συμβολοσειρά JSON σε α Αντικείμενο JSON.

Όταν εργαζόμαστε με δεδομένα στο React, χρησιμοποιούμε συχνά άγκιστρα για να μας βοηθήσετε να το αποθηκεύσουμε/κρατήσουμε. Τα Hooks μπορούν επίσης να μας βοηθήσουν να βρούμε πού να ανεβάσουμε αυτά τα δεδομένα. Αυτό ισχύει και για localStorage γιατί θα χρησιμοποιήσουμε το useState() και useEffect() αγκίστρια. Αυτά τα άγκιστρα είναι κρίσιμα επειδή το useState() Το άγκιστρο χρησιμοποιείται για τη διατήρηση και τη ρύθμιση δεδομένων, ενώ το useEffect() Το άγκιστρο ενεργοποιείται από προεπιλογή μετά την πρώτη απόδοση και όποτε περνούσε η κατάσταση καθώς αλλάζει η δεύτερη παράμετρος.

Αφού εξηγήσουμε το θεμέλιο, εδώ είναι ο κώδικας που θα χρησιμοποιούσαμε για να αποθηκεύσουμε δεδομένα localStorage:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Πρώτα δημιουργήσαμε μια κατάσταση για να κρατάμε τα δεδομένα που θέλουμε να αποθηκεύσουμε στο δικό μας localStorage, και στη συνέχεια δημιουργήσαμε ένα useEffect() γάντζο, περνώντας την κατάσταση ως δεύτερη παράμετρο. Με αυτόν τον τρόπο, όποτε αλλάζει η κατάσταση, τα δεδομένα στο localStorage ενημερώνεται στην τρέχουσα τιμή.

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

localStorage.setItem('dataKey', JSON.stringify(data));

Συμπέρασμα

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