JavaScript (συχνά συντομογραφείται ως JS) είναι ένα από τα θεμέλια της σύγχρονης υποδομής του ιστού. Είναι μια ελαφριά, διερμηνευόμενη, αντικειμενοστρεφής γλώσσα προγραμματισμού που υποστηρίζει συναρτήσεις πρώτης κατηγορίας. Η JavaScript είναι κυρίως γνωστή για την εφαρμογή της σε δυναμικές ιστοσελίδες. Λόγω των χαρακτηριστικών της, ωστόσο, η JavaScript χρησιμοποιείται επίσης σε περιβάλλοντα εκτός προγράμματος περιήγησης.
Σε αυτόν τον οδηγό, θα συζητήσουμε λεπτομερώς δύο αντικείμενα JavaScript: localStorage και sessionStorage.
Επισκόπηση των localStorage και sessionStorage
Τα αντικείμενα localStorage και sessionStorage προσφέρονται ως μέρος του web storage API. Είναι ένα εξαιρετικό εργαλείο για την τοπική αποθήκευση ζευγών κλειδιού-τιμής. Η χρήση των localStorage και sessionStorage είναι μια εξαιρετική εναλλακτική λύση στα cookies. Αυτή η προσέγγιση προσφέρει ορισμένα επιπλέον οφέλη:
- Τα δεδομένα αποθηκεύονται τοπικά και δεν μπορούν να διαβαστούν από τον διακομιστή. Αυτό εξαλείφει τα προβλήματα ασφάλειας με τα cookies.
- Επιτρέπει μεγαλύτερη χωρητικότητα αποθήκευσης (έως 10 MB για τα περισσότερα σύγχρονα προγράμματα περιήγησης).
- Απλή και ξεκάθαρη σύνταξη.
Αυτά τα αντικείμενα υποστηρίζονται σε όλα τα σύγχρονα προγράμματα περιήγησης ιστού, επομένως δεν θα υπάρχει πρόβλημα συμβατότητας προγράμματος περιήγησης. Τα cookies εξακολουθούν να είναι χρήσιμα σε πολλές περιπτώσεις, για παράδειγμα, στην ταυτοποίηση. Ωστόσο, υπάρχουν περιπτώσεις όπου τα localStorage και sessionStorage προσφέρουν καλύτερες λύσεις.
Προαπαιτούμενα
Για να εκτελέσετε τα βήματα που παρουσιάζονται σε αυτό το σεμινάριο, θα χρειαστείτε τα ακόλουθα στοιχεία:
- Έναν κατάλληλα ρυθμισμένο διακομιστή Linux. Αυτός ο οδηγός παρουσιάζει τη ρύθμιση του δικού σας διακομιστή Ubuntu στο CloudSigma.
- Node.js ως περιβάλλον εκτέλεσης JavaScript. Μάθετε περισσότερα για την εγκατάσταση του Node.js στο Ubuntu εδώ.
- Ένα σύγχρονο πρόγραμμα περιήγησης ιστού, για παράδειγμα, το Google Chrome ή το Firefox.
Για επίδειξη, πήραμε μια δείγμα ιστοσελίδας που συνοδεύεται από ένα σενάριο JS. Μπορείτε να μάθετε περισσότερα σχετικά με την προσθήκη JavaScript σε ένα αρχείο HTML εδώ:
Όσον αφορά τον επεξεργαστή κειμένου, θα χρησιμοποιήσουμε το Visual Studio Code:
Ποια είναι η διαφορά μεταξύ localStorage και sessionStorage;
Και τα δύο localStorage και sessionStorage προέρχονται από το ίδιο API. Οι συμπεριφορές τους είναι επίσης πανομοιότυπες. Η μόνη διαφορά είναι στον τρόπο με τον οποίο κάθε αντικείμενο επιτρέπει τη διατήρηση των δεδομένων. Στην περίπτωση του sessionStorage, τα δεδομένα διατηρούνται μέχρι να κλείσει το παράθυρο ή η καρτέλα. Με το localStorage, τα δεδομένα διατηρούνται μέχρι να εκκαθαριστεί η προσωρινή μνήμη του προγράμματος περιήγησης ή να τα εκκαθαρίσει η ίδια η διαδικτυακή εφαρμογή.
Σε αυτό το σεμινάριο, θα εστιάσουμε κυρίως στο localStorage. Ωστόσο, η σύνταξη για το sessionStorage είναι η ίδια. Θα δείξουμε πώς να δημιουργείτε, να διαβάζετε και να ενημερώνετε ζεύγη κλειδιού/τιμής χρησιμοποιώντας το localStorage.
Βήμα 1 – Δημιουργία καταχωρίσεων
Μπορούμε να δηλώσουμε μια καταχώριση στο αντικείμενο localStorage χρησιμοποιώντας τη μέθοδο setItem(). Αυτή η μέθοδος δέχεται δύο ορίσματα: το κλειδί και την αντίστοιχη τιμή του. Η δομή της μεθόδου είναι η εξής:
|
1 |
localStorage.setItem(<key>, <value>) |
Στο ακόλουθο παράδειγμα, δημιουργήσαμε μια μεταβλητή key. Χρησιμοποιώντας τη μέθοδο setItem(), ορίσαμε ένα νέο key και ορίσαμε την τιμή του σε ‘value’:
|
1 2 |
let key = 'item_1'; localStorage.setItem(key, 'value'); |
Βήμα 2 – Ανάγνωση καταχωρίσεων
Τώρα, πώς διαβάζουμε την τιμή που είναι αποθηκευμένη στο κλειδί; Για να πάρουμε ένα κλειδί από το localStorage, θα χρησιμοποιήσουμε τη μέθοδο getItem(). Δέχεται το όνομα του κλειδιού και επιστρέφει τις τιμές που είναι αποθηκευμένες σε αυτό. Θα χρησιμοποιήσουμε τη μέθοδο alert() για να εμφανίσουμε το περιεχόμενο που ανακτούμε:
|
1 2 |
let myItem = localStorage.getItem(key); alert(myItem); |
Στη συνέχεια, ανοίξτε την ιστοσελίδα σε ένα πρόγραμμα περιήγησης ιστού. Θα πρέπει να δείξει την τιμή που είναι αποθηκευμένη στο key:
Βήμα 3 – Ενημέρωση καταχωρίσεων
Μόλις οριστεί μια τιμή, θα παραμείνει έτσι εκτός αν αλλάξει. Αν χρησιμοποιήσουμε τη μέθοδο setItem() στο ίδιο key ξανά, θα αντικαταστήσει αυτόματα την παλιά τιμή με τη νέα.
Στο ακόλουθο παράδειγμα, το key αρχικά αρχικοποιείται με την τιμή ‘value’. Στην επόμενη γραμμή, καλέσαμε τη μέθοδο setItem() άλλη μια φορά και ορίσαμε την τιμή σε ‘new value’:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.setItem(key, 'new value'); let myItem = localStorage.getItem(key); alert(myItem); |
Ας δούμε τι συμβαίνει όταν εκτελούμε αυτόν τον κώδικα στο πρόγραμμα περιήγησης:
Όπως μπορούμε να δούμε, η τιμή του κλειδιού έχει οριστεί σε ‘νέα τιμή’.
Βήμα 4 – Διαγραφή καταχωρίσεων
Αν υπάρχουν πολλαπλές καταχωρίσεις στο localStorage (και sessionStorage επίσης) που δεν είναι πλέον απαραίτητες, συνιστάται να τις καθαρίσετε στη συνέχεια. Αυτό ελευθερώνει περισσότερο χώρο για μελλοντική χρήση. Η εφαρμογή γίνεται επίσης πιο αποδοτική ως προς τη μνήμη.
Για να διαγράψετε μια καταχώριση από το localStorage, υπάρχει μια αποκλειστική μέθοδος removeItem(). Παίρνει το key ως όρισμα και το αφαιρεί από το localStorage σύνολο δεδομένων:
|
1 |
localStorage.removeItem(<key_to_remove>) |
Ας το υλοποιήσουμε στο script μας:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.removeItem(key); let myItem = localStorage.getItem(key); alert(myItem); |
Όταν εκτελείται, το αποτέλεσμα λέει null επειδή δεν υπάρχει τιμή για το key:
Βήμα 5 – Καθαρισμός καταχωρίσεων
Στο προηγούμενο παράδειγμα, αφαιρέσαμε μόνο ένα κλειδί. Ωστόσο, το localStorage επιτρέπει την εκκαθάριση όλων των στοιχείων που είναι αποθηκευμένα σε ένα μόνο βήμα. Για να καθαρίσετε όλες τις καταχωρίσεις, το localStorage προσφέρει τη μέθοδο clear(). Δεν δέχεται κανένα όρισμα:
|
1 |
localStorage.clear(); |
Θέστε τη μέθοδο σε λειτουργία:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.clear(); let myItem = localStorage.getItem(key); alert(myItem); |
Όπως και πριν, αφαιρεί όλες τις καταχωρίσεις από το localStorage, οπότε όταν προσπαθείτε να αποκτήσετε πρόσβαση στην τιμή του key , επιστρέφει null:
Βήμα 6 – Εργασία με JSON
-
Αποθήκευση αντικειμένων και πινάκων
Τα αντικείμενα localStorage και sessionStorage μπορούν να αποθηκεύσουν μόνο τιμές συμβολοσειράς. Ωστόσο, θα υπάρξουν φορές που θα πρέπει να εργαστείτε με αντικείμενα ή πίνακες. Σε αυτή την περίπτωση, πρέπει να τα μετατρέψουμε σε συμβολοσειρά.
Η JavaScript διαθέτει τη δυνατότητα JSON.stringify() που θα πάρει τον πίνακα/αντικείμενο και θα τον μετατρέψει σε συμβολοσειρές. Αυτή η ανάρτηση παρέχει μια σύντομη επισκόπηση της μορφής JSON. Για έναν πιο αναλυτικό οδηγό, μπορείτε να διαβάσετε το JSON στη JavaScript.
Σε αυτό το παράδειγμα, δημιουργήσαμε ένα αντικείμενο sampleObj με δύο πεδία name και location. Θα το μετατρέψουμε σε συμβολοσειρά και θα το αποθηκεύσουμε στο key:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = localStorage.getItem(key); alert(myItem); |
Εδώ, το αποτέλεσμα θα είναι η συμβολοσειρά που περιέχει τα δεδομένα του αντικειμένου:
-
Ανάγνωση αντικειμένων και πινάκων
Κατά την αποθήκευση, μετατρέψαμε τα αντικείμενα και τους πίνακες σε συμβολοσειρές. Μπορούμε να πάρουμε αυτή τη συμβολοσειρά και να τη μετατρέψουμε ξανά στην αρχική της μορφή. Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε τη μέθοδο JSON.parse(). Παίρνει μια συμβολοσειρά και τη μετατρέπει ξανά σε μορφή JSON:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = JSON.parse(localStorage.getItem(key)); alert(JSON.stringify(myItem, null, " ")); |
Όσον αφορά το αποτέλεσμα, το μετατρέψαμε ξανά σε συμβολοσειρά και το μορφοποιήσαμε για καλύτερη εμφάνιση:
Βήμα 7 – Έλεγχος για στοιχείο στο localStorage
Σε αυτήν την ενότητα, θα παρουσιάσουμε μια απλή δοκιμή για να προσδιορίσουμε εάν το localStorage και το sessionStorage περιέχουν κάποιο στοιχείο ή όχι. Χρησιμοποιώντας μια απλή if δήλωση, μπορούμε να ελέγξουμε το μήκος του localStorage ή του sessionStorage. Αν υπάρχουν στοιχεία, το μήκος θα είναι μεγαλύτερο από 0.
First, implement the following example:
|
1 2 3 4 5 6 7 8 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ alert('true'); } else{ alert('false'); } |
Εδώ, το αποτέλεσμα θα είναι ‘true’ επειδή υπάρχει ένα κλειδί στο localStorage:
Βήμα 8 – Επανάληψη σε Στοιχεία
Το αντικείμενο localStorage και sessionStorage αποθηκεύει τα κλειδιά σε μια δομή που μοιάζει με πίνακα. Δεν υποστηρίζουν τη μέθοδο forEach, οπότε θα πρέπει να ακολουθήσουμε την κλασική τεχνική της χρήσης ενός βρόχου for για να επαναλάβουμε τη διαδικασία σε κάθε στοιχείο.
Στο ακόλουθο παράδειγμα, θα ελέγξουμε αν το localStorage είναι κενό ή όχι. Αν δεν είναι κενό, τότε θα επαναλάβουμε τη διαδικασία σε κάθε στοιχείο:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ for(i = 0; i < localStorage.length; i++){ let key = localStorage.key(i); let myItem = localStorage.getItem(key); alert(key); } } else{ alert('false'); } |
Το αποτέλεσμα θα εμφανίσει όλα τα στοιχεία ένα προς ένα:
Βήμα 9 – Έλεγχος Υποστήριξης Προγράμματος Περιήγησης
Μπορούμε να ελέγξουμε την υποστήριξη για το localStorage (και το sessionStorage) ελέγχοντας αν είναι διαθέσιμο στο αντικείμενο window. Μια απλή δήλωση if θα κάνει τη δουλειά:
|
1 2 3 4 5 6 |
if(window.localStorage){ alert(true); } else{ alert(false); } |
Εκτελέστε τον κώδικα στο πρόγραμμα περιήγησης ιστού:
Τελικές Σκέψεις
Αυτός ο οδηγός έδειξε πώς να χρησιμοποιείτε τα αντικείμενα localStorage και sessionStorage στη JavaScript για την αποθήκευση ζευγών κλειδιού/τιμής στο πρόγραμμα περιήγησης. Οι συντάξεις είναι πολύ πιο απλές στη χρήση. Παρουσιάσαμε πώς να δημιουργείτε, να αφαιρείτε και να ενημερώνετε ζεύγη κλειδιού/τιμής. Αντιμετωπίσαμε επίσης την αποθήκευση αντικειμένων και πινάκων μετατρέποντάς τα σε συμβολοσειρές (και αντίστροφα).
Για να εμβαθύνετε περισσότερο τις γνώσεις σας στη JavaScript, μπορείτε να δείτε τα ακόλουθα σεμινάρια από το ιστολόγιό μας:
- Βασικά στοιχεία της JavaScript: Πώς να εργαστείτε με την Ημερομηνία και την Ώρα
- JavaScript: Ένας οδηγός για τον τρόπο ευρετηρίασης, διαχωρισμού και χειρισμού συμβολοσειρών
- Εργασία με τη JavaScript: Πώς λειτουργούν οι Κλάσεις
- Εργασία με τη JavaScript: Πώς λειτουργούν τα Πρότυπα και οι Κληρονομικότητες
Καλή συνέχεια στον προγραμματισμό!
Σχόλια
Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.