Το local storage επιτρέπει στις ιστοσελίδες να αποθηκεύουν δεδομένα απευθείας στον browser σου, ώστε να μένουν από επίσκεψη σε επίσκεψη. Μάθε πώς λειτουργεί, σε τι το χρησιμοποιούν οι ιστοσελίδες και τι σημαίνει για τη δική σου.
Έχεις ορίσει ποτέ μια προτίμηση σε μια ιστοσελίδα, έχεις κλείσει την καρτέλα και όταν γύρισες αργότερα τα βρήκες όλα ακριβώς όπως τα άφησες; Οι ρυθμίσεις εμφάνισης ήταν ίδιες, τα αποθηκευμένα στοιχεία ήταν ακόμα εκεί και δεν χρειάστηκε να ορίσεις ξανά τίποτα. Αυτό είναι το local storage που κάνει αθόρυβα τη δουλειά του στο παρασκήνιο.
Στο προηγούμενο κεφάλαιο για τους τύπους αποθήκευσης του browser, παρουσιάσαμε το local storage ως έναν από τους βασικούς τρόπους με τους οποίους οι browsers κρατούν δεδομένα. Αυτό το κεφάλαιο εξηγεί σε βάθος τι είναι στην πραγματικότητα το local storage, πώς λειτουργεί και τι ρόλο παίζει στην ιστοσελίδα σου.
Τι είναι το local storage;
Το local storage είναι ένας τύπος αποθήκευσης browser που επιτρέπει στις ιστοσελίδες να αποθηκεύουν μικρά κομμάτια δεδομένων απευθείας στη συσκευή του επισκέπτη. Αυτά τα δεδομένα μένουν στον browser ακόμα κι αφού ο επισκέπτης κλείσει την καρτέλα ή σβήσει τον υπολογιστή του. Την επόμενη φορά που θα επισκεφτεί την ίδια ιστοσελίδα, ο browser έχει ακόμα διαθέσιμα αυτά τα δεδομένα και η ιστοσελίδα μπορεί να τα χρησιμοποιήσει για να επαναφέρει την προηγούμενη κατάστασή του.
Αυτό ξεχωρίζει το local storage από το session storage, που καθαρίζει όταν κλείνει η καρτέλα. Το local storage είναι μόνιμο. Δεν έχει αυτόματη λήξη. Τα δεδομένα μένουν μέχρι ο χρήστης να καθαρίσει τον browser του ή μέχρι να τα αφαιρέσει η ίδια η ιστοσελίδα.
Πώς λειτουργεί το local storage;
Το local storage λειτουργεί ως απλή αποθήκη κλειδιού-τιμής. Σκέψου το σαν ένα μικρό σημειωματάριο μέσα στον browser, όπου μια ιστοσελίδα μπορεί να γράφει πληροφορίες με μια ετικέτα και μια τιμή. Η ετικέτα είναι το κλειδί και η πληροφορία που αποθηκεύεται κάτω από αυτό είναι η τιμή. Όταν η ιστοσελίδα χρειαστεί ξανά αυτή την πληροφορία, αναζητά το κλειδί και ανακτά την τιμή.
Για παράδειγμα, μια ιστοσελίδα μπορεί να αποθηκεύσει ένα κλειδί «theme» με τιμή «dark» όταν ένας επισκέπτης αλλάξει σε σκούρα λειτουργία. Την επόμενη φορά που θα γυρίσει ο επισκέπτης, η ιστοσελίδα ελέγχει το local storage, βρίσκει το κλειδί «theme», διαβάζει την τιμή «dark» και εφαρμόζει αυτόματα τη σκούρα λειτουργία πριν καν εμφανιστεί πλήρως η σελίδα.
Κάθε ιστοσελίδα έχει το δικό της απομονωμένο local storage. Μια ιστοσελίδα μπορεί να διαβάζει και να γράφει μόνο τα δικά της δεδομένα. Δεν μπορεί να δει τι έχει αποθηκεύσει οποιαδήποτε άλλη ιστοσελίδα. Αυτή η απομόνωση είναι λειτουργία ασφαλείας ενσωματωμένη σε κάθε browser.
Σε τι χρησιμοποιούν οι ιστοσελίδες το local storage;
Αποθήκευση προτιμήσεων χρήστη
Ρυθμίσεις εμφάνισης, προτιμήσεις γλώσσας, επιλογές θέματος και επιλογές διάταξης είναι συνηθισμένα πράγματα που αποθηκεύονται στο local storage. Είναι μη ευαίσθητες προτιμήσεις που βελτιώνουν την εμπειρία όταν ο επισκέπτης επιστρέφει.
Διατήρηση στοιχείων ανάμεσα σε επισκέψεις
Ορισμένες ιστοσελίδες χρησιμοποιούν το local storage για να κρατούν στοιχεία με τα οποία έχει αλληλεπιδράσει ο επισκέπτης, όπως μια λίστα ανάγνωσης, μια λίστα επιθυμιών ή προϊόντα που είδε πρόσφατα, ώστε να είναι ακόμα εκεί στην επόμενη επίσκεψη, ακόμα κι αν ο επισκέπτης δεν είναι συνδεδεμένος.
Μείωση αιτημάτων προς τον διακομιστή
Όταν μια ιστοσελίδα αποθηκεύει πληροφορίες τοπικά, μπορεί να τις ανακτά αμέσως από τον browser αντί να κάνει αίτημα στον διακομιστή κάθε φορά. Αυτό επιταχύνει την εμπειρία για επισκέπτες που επιστρέφουν και μειώνει το φορτίο στο backend.
Διατήρηση κατάστασης σε φόρμες και διαδικασίες πολλών βημάτων
Ορισμένες ιστοσελίδες χρησιμοποιούν το local storage για να αποθηκεύουν προσωρινά την πρόοδο σε μια φόρμα πολλών βημάτων ή σε μια διαδικασία ολοκλήρωσης αγοράς. Αν ένας επισκέπτης κλείσει κατά λάθος την καρτέλα, δεν χάνει την πρόοδό του όταν γυρίσει.
Ποια είναι τα όρια του local storage;
Το local storage έχει σχεδιαστεί για μικρά δεδομένα. Οι περισσότεροι browsers επιτρέπουν περίπου 5 με 10 megabytes ανά ιστοσελίδα, που είναι υπεραρκετά για προτιμήσεις και ρυθμίσεις, αλλά όχι για μεγάλα αρχεία ή σύνθετα σύνολα δεδομένων. Αποθηκεύει επίσης μόνο κείμενο. Οι αριθμοί, τα αντικείμενα και οι πίνακες πρέπει πρώτα να μετατραπούν σε κείμενο για να αποθηκευτούν και να μετατραπούν πίσω όταν ανακτηθούν.
Το local storage δεν είναι επίσης το σωστό μέρος για ευαίσθητες πληροφορίες. Επειδή είναι προσβάσιμο από κάθε script που τρέχει στη σελίδα, η αποθήκευση κωδικών, προσωπικών στοιχείων ή στοιχείων πληρωμής στο local storage είναι κίνδυνος ασφαλείας. Τα ευαίσθητα δεδομένα ανήκουν στον διακομιστή, προστατευμένα με SSL και σωστή ταυτοποίηση.
Για μια σύγκριση δίπλα δίπλα του local storage με τους άλλους τύπους αποθήκευσης, διάβασε τύποι αποθήκευσης του browser.
Συχνές ερωτήσεις
Δουλεύει το local storage χωρίς σύνδεση στο διαδίκτυο;
Ναι. Το local storage αποθηκεύεται στη συσκευή του επισκέπτη και όχι σε διακομιστή. Τα δεδομένα είναι διαθέσιμα ακόμα κι όταν ο browser είναι εκτός σύνδεσης. Αυτός είναι ένας από τους λόγους που το local storage χρησιμοποιείται συχνά μαζί με service workers και cache storage για να χτίζονται ιστοσελίδες που λειτουργούν μερικώς ή πλήρως εκτός σύνδεσης.
Μοιράζεται το local storage ανάμεσα σε διαφορετικούς browsers στην ίδια συσκευή;
Όχι. Το local storage είναι ειδικό για κάθε browser. Αν αποθηκεύσεις δεδομένα σε έναν browser, δεν φαίνονται σε διαφορετικό browser στην ίδια συσκευή. Κάθε browser διατηρεί το δικό του ξεχωριστό local storage. Αυτό σημαίνει ότι ένας επισκέπτης που αλλάζει από τον έναν browser στον άλλον δεν θα πάρει μαζί του τις αποθηκευμένες προτιμήσεις ή δεδομένα του.
Μπορούν οι επισκέπτες να δουν ή να σβήσουν τα δεδομένα του local storage τους;
Ναι. Οποιοσδήποτε μπορεί να ανοίξει τα εργαλεία προγραμματιστή του browser του και να δει ή να σβήσει δεδομένα local storage για οποιαδήποτε ιστοσελίδα. Οι επισκέπτες μπορούν επίσης να καθαρίσουν όλα τα δεδομένα του browser από τις ρυθμίσεις του, κάτι που σβήνει εντελώς το local storage. Αυτό σημαίνει ότι οι ιστοσελίδες δεν πρέπει να βασίζονται στο local storage ως μόνιμη ή εγγυημένη πηγή δεδομένων.
Ποια είναι η διαφορά ανάμεσα στο local storage και στα cookies;
Τα cookies στέλνονται πίσω στον διακομιστή με κάθε αίτημα, γι' αυτό ταιριάζουν στη διαχείριση συνεδριών και στην ταυτοποίηση. Το local storage μένει μόνο στον browser και δεν στέλνεται ποτέ αυτόματα στον διακομιστή. Το local storage χωράει επίσης περισσότερα δεδομένα από τα cookies και δεν έχει ενσωματωμένη λήξη. Το καθένα ταιριάζει σε διαφορετικές περιπτώσεις χρήσης, και οι καλοφτιαγμένες ιστοσελίδες χρησιμοποιούν και τα δύο κατάλληλα.
Επηρεάζει το local storage την ταχύτητα της ιστοσελίδας;
Η ανάγνωση και η εγγραφή στο local storage είναι πολύ γρήγορη, οπότε σπάνια προκαλεί αισθητά προβλήματα ταχύτητας. Στην πραγματικότητα, η χρήση του local storage για να αποθηκεύονται προτιμήσεις και να μειώνονται τα αιτήματα προς τον διακομιστή μπορεί να κάνει μια ιστοσελίδα να φαίνεται πιο γρήγορη σε επισκέπτες που επιστρέφουν. Ο αντίκτυπος στην ταχύτητα της ιστοσελίδας είναι γενικά θετικός όταν το local storage χρησιμοποιείται λογικά.
Πρέπει να διαχειρίζομαι το local storage στην ιστοσελίδα μου;
Αν χρησιμοποιείς δημιουργό ιστοσελίδων, το local storage διαχειρίζεται αυτόματα η πλατφόρμα για τις λειτουργίες που υποστηρίζει. Δεν χρειάζεται να γράψεις ή να ρυθμίσεις τίποτα μόνος σου. Ο δημιουργός αναλαμβάνει στο παρασκήνιο κάθε προτίμηση ή διαχείριση κατάστασης που χρησιμοποιεί local storage. Με τον δημιουργό ιστοσελίδων του WEMASY, όλα αυτά είναι ενσωματωμένα στον τρόπο που λειτουργεί η πλατφόρμα.