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

Cookies, sessionStorage και localStorage είναι μηχανισμοί αποθήκευσης ιστού που διαφέρουν ως προς τον σκοπό, τη διάρκεια ζωής και τον όγκο των αποθηκευμένων δεδομένων.

Cookies: Μικρά τμήματα δεδομένων που αποστέλλονται από τον διακομιστή ιστού και αποθηκεύονται στον περιηγητή του χρήστη. Αποστέλλονται με κάθε επόμενη αίτηση στον ίδιο διακομιστή. Χρησιμοποιούνται για αυθεντικοποίηση, αποθήκευση προτιμήσεων χρήστη, παρακολούθηση της κατάστασης του καλαθιού αγορών.
- Διάρκεια ζωής: Ορίζεται κατά τη δημιουργία (μπορεί να είναι συνεδρίας ή με συγκεκριμένη ημερομηνία λήξης).
- Όγκος: Περιορισμένος, συνήθως μερικά κιλομπάιτ (περίπου 4 KB).
sessionStorage: Αποθηκεύει δεδομένα μόνο για μια συνεδρία περιηγητή (ανοιχτή καρτέλα ή παράθυρο). Τα δεδομένα διαγράφονται κατά το κλείσιμο της καρτέλας ή του παραθύρου.
- Διάρκεια ζωής: Μέχρι το κλείσιμο της καρτέλας ή του παραθύρου.
- Όγκος: Σημαντικά μεγαλύτερος από τα cookies (συνήθως μερικά megabytes).
localStorage: Αποθηκεύει δεδομένα χωρίς ημερομηνία λήξης, μέχρι να διαγραφούν ρητά από τον χρήστη ή το σενάριο. Διαθέσιμο σε όλες τις καρτέλες και παράθυρα του ίδιου τομέα.
- Διάρκεια ζωής: Αόριστη (μέχρι να διαγραφεί ρητά).
- Όγκος: Σημαντικά μεγαλύτερος από τα cookies (συνήθως μερικά megabytes).

Ακολουθεί μια σύντομη σύγκριση:

Μηχανισμός	Διάρκεια ζωής	Διαθεσιμότητα	Αποστέλλεται στον διακομιστή	Όγκος (τυπικός)	Σκοπός
Cookies	Συνεδρίας ή με λήξη	Μέσω επικεφαλίδων HTTP	Ναι	~4 KB	Αυθεντικοποίηση, παρακολούθηση, προτιμήσεις
sessionStorage	Μέχρι το κλείσιμο καρτέλας/παραθύρου	Μέσω API JS	Όχι	~5-10 MB	Προσωρινή αποθήκευση δεδομένων συνεδρίας
localStorage	Αόριστη (μέχρι διαγραφή)	Μέσω API JS	Όχι	~5-10 MB	Μακροπρόθεσμη αποθήκευση δεδομένων

Παραδείγματα χρήσης με API JavaScript:

// Cookies (πρόσβαση μέσω document.cookie, απαιτεί χειροκίνητο parsing και serialization)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// sessionStorage
sessionStorage.setItem('id', '123');
let userId = sessionStorage.getItem('id');
sessionStorage.removeItem('id');

// localStorage
localStorage.setItem('theme', 'dark');
let userTheme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear(); // Διαγράφει όλα τα δεδομένα στο localStorage

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