Εξηγήστε τη διαφορά μεταξύ cookies, sessionStorage και localStorage.

Πεδίο εφαρμογής: Τα cookies είναι διαθέσιμα τόσο στην πλευρά του πελάτη όσο και στην πλευρά του διακομιστή. Το sessionStorage και το localStorage είναι διαθέσιμα μόνο στην πλευρά του πελάτη.

Χρόνος ζωής: Για τα cookies, ο χρόνος ζωής ορίζεται κατά τη δημιουργία τους (χρησιμοποιώντας το χαρακτηριστικό expires ή max-age). Αν δεν οριστεί, το cookie διαγράφεται κατά το κλείσιμο του προγράμματος περιήγησης. Το sessionStorage αποθηκεύει δεδομένα μόνο κατά τη διάρκεια της τρέχουσας συνεδρίας (μέχρι το κλείσιμο της καρτέλας ή του παραθύρου). Το localStorage αποθηκεύει δεδομένα αόριστα, μέχρι να διαγραφούν ρητά.

Μέγεθος: Το μέγιστο μέγεθος για τα cookies είναι περίπου 4 KB. Για το sessionStorage και το localStorage, κυμαίνεται μεταξύ 5 MB και 10 MB, ανάλογα με το πρόγραμμα περιήγησης.

Αποστολή με κάθε αίτημα: Τα cookies αποστέλλονται αυτόματα με κάθε αίτημα HTTP στον τομέα για τον οποίο έχουν οριστεί, κάτι που μπορεί να αυξήσει την κίνηση. Τα δεδομένα στο sessionStorage και το localStorage δεν αποστέλλονται στον διακομιστή.

Τρόπος πρόσβασης: Η πρόσβαση στα cookies γίνεται μέσω του document.cookie (σειρά). Η πρόσβαση σε sessionStorage και localStorage γίνεται μέσω των αντίστοιχων αντικειμένων με τη χρήση των μεθόδων setItem, getItem, removeItem και clear.

// Ορισμός cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// Ανάγνωση cookie
let x = document.cookie;

// Ορισμός δεδομένων στο sessionStorage
sessionStorage.setItem("lastname", "Smith");

// Ανάγνωση δεδομένων από το sessionStorage
let y = sessionStorage.getItem("lastname");

// Ορισμός δεδομένων στο localStorage
localStorage.setItem("firstname", "Jane");

// Ανάγνωση δεδομένων από το localStorage
let z = localStorage.getItem("firstname");

Χαρακτηριστικό	cookies	sessionStorage	localStorage
Πεδίο εφαρμογής	Πελάτης και Διακομιστής	Μόνο Πελάτης	Μόνο Πελάτης
Χρόνος ζωής	Ορίζεται κατά τη δημιουργία (expires/max-age), ή μέχρι το κλείσιμο του προγράμματος περιήγησης	Μέχρι το κλείσιμο της καρτέλας ή του παραθύρου	Αόριστο (μέχρι να διαγραφεί ρητά)
Μέγεθος	~4 KB	~5-10 MB (ανάλογα με το πρόγραμμα περιήγησης)	~5-10 MB (ανάλογα με το πρόγραμμα περιήγησης)
Αποστολή με το αίτημα	Ναι	Όχι	Όχι
Πρόσβαση	document.cookie	sessionStorage.getItem/setItem	localStorage.getItem/setItem