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

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

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

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

Εάν θέλετε να αποθηκεύσετε αντικείμενα ή πίνακες, θα πρέπει να τα μετατρέψετε σε συμβολοσειρές χρησιμοποιώντας το

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

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

localStorage vs. sessionStorage

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

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

Πώς λειτουργεί το localStorage;

Μπορείτε να αποκτήσετε πρόσβαση στη λειτουργία localStorage μέσω του Window.localStorage ιδιοκτησία. Αυτή η ιδιότητα παρέχει πολλές μεθόδους όπως setItem(), getItem() και removeItem(). Μπορείτε να τα χρησιμοποιήσετε για να αποθηκεύσετε, να διαβάσετε και να διαγράψετε ζεύγη κλειδιών/τιμών.

Πώς να αποθηκεύσετε δεδομένα στο localStorage

Μπορείτε να αποθηκεύσετε δεδομένα στο localStorage χρησιμοποιώντας το setItem() μέθοδος. Αυτή η μέθοδος δέχεται δύο ορίσματα, το κλειδί και την αντίστοιχη τιμή.

window.localStorage.setItem('Πύθων', 'Guido van Rossum');

Εδώ, Πύθων είναι το κλειδί και Guido van Rossum είναι η αξία. Εάν θέλετε να αποθηκεύσετε έναν πίνακα ή ένα αντικείμενο, θα πρέπει να το μετατρέψετε σε συμβολοσειρά. Μπορείτε να μετατρέψετε έναν πίνακα ή ένα αντικείμενο σε συμβολοσειρά χρησιμοποιώντας το JSON.stringify() μέθοδος.

παράθυρο.localStorage.setItem('Python', 'Guido van Rossum');
συνθ μαθητής = {
 όνομα: "Yuvraj",
 σημάδια: 85,
 Θέμα: "Μηχανική μάθηση"
}
συνθ βαθμολογίες = [76, 77, 34, 67, 88];
παράθυρο.localStorage.setItem('αποτέλεσμα', JSON.stringify (φοιτητής));
παράθυρο.localStorage.setItem('marks', JSON.stringify (σκορ));

Πώς να διαβάσετε δεδομένα από το localStorage

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

αφήνω data1 = παράθυρο.localStorage.getItem('Python');
αφήνω data2 = παράθυρο.localStorage.getItem('αποτέλεσμα');
κονσόλα.log (data1);
κονσόλα.log (data2);

Αυτό παράγει την ακόλουθη έξοδο:

Guido van Rossum
{"όνομα":"Yuvraj","σημάδια":85,"θέμα":"Μηχανική Μάθηση"}

Εάν θέλετε να μετατρέψετε το αποτέλεσμα από συμβολοσειρά σε αντικείμενο, θα πρέπει να χρησιμοποιήσετε το JSON.parse() μέθοδος.

αφήνω data2 = JSON.αναλύω πρόταση(παράθυρο.localStorage.getItem('αποτέλεσμα'));
κονσόλα.log (data2);

Πώς να διαγράψετε τις συνεδρίες τοπικής αποθήκευσης

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

window.localStorage.removeItem('Πύθων');
window.localStorage.removeItem('C++');

Πώς να διαγράψετε όλα τα στοιχεία στο localStorage

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

παράθυρο.localStorage.Σαφή();

Πώς να βρείτε το μήκος της τοπικής αποθήκευσης

Μπορείτε να βρείτε το μήκος του localStorage χρησιμοποιώντας το localStorage.length ιδιοκτησία.

αφήνω len = localStorage.length;
κονσόλα.log (len);

Πώς να πάρετε το κλειδί σε μια δεδομένη θέση

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

αφήνω d = localStorage.key(1);
κονσόλα.log (d);

Η μέθοδος key() χρησιμοποιείται κυρίως για να κάνει βρόχο σε όλα τα στοιχεία στο localStorage.

Πώς να κάνετε βρόχο μέσω όλων των αντικειμένων στο localStorage

Μπορείτε να επαναλάβετε όλα τα στοιχεία στο localStorage χρησιμοποιώντας έναν βρόχο for.

Για (αφήνω i = 0; i < localStorage.length; i++){
αφήνω κλειδί = localStorage.key (i);
αφήνω τιμή = localStorage.getItem (κλειδί);
κονσόλα.log (κλειδί, τιμή);
}

Η μέθοδος key() δέχεται το ευρετήριο ως όρισμα και επιστρέφει το αντίστοιχο κλειδί. Η μέθοδος getItem() δέχεται το κλειδί ως όρισμα και επιστρέφει την αντίστοιχη τιμή. Τέλος, το console.log() μέθοδος εκτυπώνει το ζεύγος κλειδιού-τιμής.

Απλό έργο JavaScript Βασισμένο στο localStorage

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

Δημιουργήστε ένα index.html και script.js αρχείο σε νέο φάκελο και ανοίξτε τα αρχεία στον αγαπημένο σας επεξεργαστή κώδικα. Χρησιμοποιήστε τον ακόλουθο κώδικα HTML για να δημιουργήσετε μια διεπαφή για την εφαρμογή μετρητή βαθμολογίας:

<!DOCTYPE html>
<html>
<σώμα>
<h1>localStorage σε JavaScript</h1>
<κουμπί onclick="αύξησηΜετρητής()" τύπος="κουμπί">Αύξηση βαθμολογίας</button>
<κουμπί onclick="dropCounter()" τύπος="κουμπί">Μείωση βαθμολογίας</button>
<κουμπί onclick="clearCounter()" τύπος="κουμπί">Εκκαθάριση τοπικής αποθήκευσης</button>
<Π>Σκορ:</Π>
<p id="σκορ"></Π>
<Π>Κάνε κλικ στο "Αύξηση βαθμολογίας" κουμπί για να αυξήσετε τη βαθμολογία</Π>
<Π>Κάνε κλικ στο "Μείωση βαθμολογίας" κουμπί για να μειώσετε τη βαθμολογία</Π>
<Π>Κάνε κλικ στο "Εκκαθάριση τοπικής αποθήκευσης" κουμπί για εκκαθάριση της τοπικής αποθήκευσης</Π>
<Π>
 Μπορείτε να κλείσετε την καρτέλα του προγράμματος περιήγησης (ή παράθυρο), και προσπαθήστε πάλι.
 Θα δείτε ότι τα δεδομένα εξακολουθούν να υπάρχουν καιείναιδεν χάθηκε ακόμα και μετά το κλείσιμο
 το πρόγραμμα περιήγησης.
</Π>
<σενάριο src="script.js"></script>
</body>
</html>

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

λειτουργίααύξησηΜετρητής() {
var καταμέτρηση = Αριθμός(παράθυρο.localStorage.getItem("count"));
 μετρήστε += 1;
 window.localStorage.setItem("μετρώ", μετρώ);
 document.getElementById("σκορ").innerHTML = καταμέτρηση;
}

ο αύξησηΜετρητής() Η συνάρτηση ανακτά την καταμέτρηση χρησιμοποιώντας τη μέθοδο getItem(). Μετατρέπει το αποτέλεσμα σε Number, αφού η getItem() επιστρέφει μια συμβολοσειρά και την αποθηκεύει στη μεταβλητή count.

Την πρώτη φορά που κάνετε κλικ στο Αύξηση βαθμολογίας Το κουμπί θα βρίσκεται πριν από οποιαδήποτε κλήση στο setItem(). Το πρόγραμμα περιήγησής σας δεν θα βρει το μετρώ κλειδί στο localStorage, οπότε θα επιστρέψει μια μηδενική τιμή. Εφόσον η συνάρτηση Number() επιστρέφει 0 για μηδενική είσοδο, δεν χρειάζεται ειδικό χειρισμό περίπτωσης. Ο κωδικός μπορεί να αυξήσει με ασφάλεια την τιμή μέτρησης πριν τον αποθηκεύσει και ενημερώσει το έγγραφο για να εμφανίσει τη νέα τιμή.

λειτουργίαμείωσηΜετρητής() {
var καταμέτρηση = Αριθμός(παράθυρο.localStorage.getItem("count"));
 καταμέτρηση -= 1;
 window.localStorage.setItem("μετρώ", μετρώ);
 document.getElementById("σκορ").innerHTML = καταμέτρηση;
}

ο dropCounter() η λειτουργία ανακτά και ελέγχει τα δεδομένα ακριβώς όπως αύξησηΜετρητής() κάνει. Μειώνει το μετρώ μεταβλητή κατά 1, η οποία προεπιλογή είναι 0.

λειτουργίαclearCounter() {
παράθυρο.localStorage.Σαφή();
 document.getElementById("σκορ").innerHTML = "";
}

Τελευταίο, το clearCounter() Η λειτουργία διαγράφει όλα τα δεδομένα από το localStorage χρησιμοποιώντας το Σαφή() μέθοδος.

Κάντε περισσότερα με το localStorage

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

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