Πώς να χρησιμοποιήσετε το τοπικό αποθηκευτικό χώρο σε JavaScript

Πώς να χρησιμοποιήσετε το τοπικό αποθηκευτικό χώρο σε JavaScript

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





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





Τι είναι το localStorage στο JavaScript;

Το αντικείμενο localStorage είναι μέρος του API αποθήκευσης Ιστού που υποστηρίζουν τα περισσότερα προγράμματα περιήγησης Ιστού. Μπορείτε να αποθηκεύσετε δεδομένα ως ζεύγη κλειδιών-τιμών χρησιμοποιώντας το localStorage. Τα μοναδικά κλειδιά και οι τιμές πρέπει να είναι σε μορφή συμβολοσειράς DOM UTF-16.





Εάν θέλετε να αποθηκεύσετε αντικείμενα ή πίνακες, θα πρέπει να τα μετατρέψετε σε συμβολοσειρές χρησιμοποιώντας το JSON.stringify() μέθοδος. Μπορείτε να αποθηκεύσετε έως και 5 MB δεδομένων στο localStorage. Επίσης, όλα τα παράθυρα με την ίδια προέλευση μπορούν να μοιράζονται τα δεδομένα τοπικής αποθήκευσης αυτού του ιστότοπου.

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



localStorage έναντι sessionStorage

ο localStorage και sessionStorage Τα αντικείμενα αποτελούν μέρος του Web Storage API που αποθηκεύει τοπικά ζεύγη κλειδιών-τιμών. Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν και τα δύο. Με το localStorage, τα δεδομένα δεν λήγουν ακόμη και αφού ένας χρήστης κλείσει το πρόγραμμα περιήγησής του. Αυτό διαφέρει από το sessionStorage που διαγράφει δεδομένα όταν τελειώνει η περίοδος λειτουργίας σελίδας. Μια περίοδος λειτουργίας σελίδας τελειώνει όταν κλείσετε μια καρτέλα ή ένα παράθυρο.