Μέχρι τώρα η αποθήκευση δεδομένων στον υπολογιστή του επισκέπτη μιας ιστοσελίδας γινόταν με τα cookies. Τα αρχεία cookies όμως δεν είναι κατάλληλα να αποθηκεύουν μεγάλου όγκου δεδομένα, καθώς σαρώνονται από κάθε αίτηση του server κάνοντας την διαδικασία αργή και μη αποτελεσματική
Στην HTML5 τα δεδομένα δεν σαρώνονται μετά από κάθε αίτηση του server, αλλά μόνο όταν απαιτείται. Έτσι είναι εφικτό να αποθηκεύονται μεγάλου όγκου δεδομένα χωρίς να επηρεάζεται η απόδοση μιας ιστοσελίδας. Επίσης τα δεδομένα αποθηκεύονται σε διαφορετικές περιοχές του δίσκου για κάθε ιστοσελίδα, έτσι ώστε μια ιστοσελίδα να έχει πρόσβαση μόνο στα δικά της δεδομένα. Όπως με τα cookies, η HTML5 αποθηκεύει δεδομένα στον client χρησιμοποιώντας JavaScript
Η HTML5 χρησιμοποιεί δύο νέες μεθόδους αποθήκευσης δεδομένων στον client:
- sessionStorage
αποθηκεύει δεδομένα μόνο για μια session
- localStorage
αποθηκεύει δεδομένα χωρίς όριο χρόνου
Στην HTML5 τα δεδομένα δεν σαρώνονται μετά από κάθε αίτηση του server, αλλά μόνο όταν απαιτείται. Έτσι είναι εφικτό να αποθηκεύονται μεγάλου όγκου δεδομένα χωρίς να επηρεάζεται η απόδοση μιας ιστοσελίδας. Επίσης τα δεδομένα αποθηκεύονται σε διαφορετικές περιοχές του δίσκου για κάθε ιστοσελίδα, έτσι ώστε μια ιστοσελίδα να έχει πρόσβαση μόνο στα δικά της δεδομένα. Όπως με τα cookies, η HTML5 αποθηκεύει δεδομένα στον client χρησιμοποιώντας JavaScript
Η HTML5 χρησιμοποιεί δύο νέες μεθόδους αποθήκευσης δεδομένων στον client:
- sessionStorage
αποθηκεύει δεδομένα μόνο για μια session
- localStorage
αποθηκεύει δεδομένα χωρίς όριο χρόνου
Η μέθοδος sessionStorage
Η μέθοδος sessionStorage αποθηκεύει στον client για μία session. Αφού η session κλείσει (μια session κλείνει όταν κάνουμε logout ή όταν φεύγουμε απο μια ιστοσελίδα), τα δεδομένα διαγράφονται.
Στο παρακάτω κώδικα βλέπουμε πως αποθηκεύουμε δεδομένα και με ποιον τρόπο διαβάζουμε τα δεδομένα αυτά με την μέθοδο sessionStorage:
Με το localStorage.xxxx δημιουργούμε μια μεταβλητή στην οποία μπορούμε να καταχωρήσουμε ένα δεδομένο. Το xxxx είναι το όνομα της μεταβλητής και μπορούμε να την ονομάσουμε όπως θέλουμε. Με το document.write(localStorage.xxxx) εμφανίζουμε το περιεχόμενο της μεταβλητής xxxx στην οθόνη του browser. Πρακτικά βέβαια ποτέ δεν χρειάζεται να εμφανίσουμε κάτι που αποθηκεύουμε στον client, αλλά χρησιμοποιούμε τα δεδομένα αυτά μέσα σε scripts με τα οποία αξιοποιούμε τα δεδομένα αυτά ποικιλοτρόπως.
Το παρακάτω παράδειγμα μετράει τις φορές που επισκέφτηκε ένας χρήστης μια ιστοσελίδα μέσα σε μια session:
Στο παρακάτω κώδικα βλέπουμε πως αποθηκεύουμε δεδομένα και με ποιον τρόπο διαβάζουμε τα δεδομένα αυτά με την μέθοδο sessionStorage:
Αποθήκευση δεδομένων στον client με την μέθοδο sessionStorage
<script type="text/javascript">
sessionStorage.username="akis";
document.write(sessionStorage.username);
</script>
sessionStorage.username="akis";
document.write(sessionStorage.username);
</script>
Το παρακάτω παράδειγμα μετράει τις φορές που επισκέφτηκε ένας χρήστης μια ιστοσελίδα μέσα σε μια session:
Αποθήκευση δεδομένων στον client με την μέθοδο sessionStorage
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
Η μεταβλητή sessionStorage.pagecount αποθηκεύεται μόνο για μια session. Όταν κλείνει το session η μεταβλητή διαγράφεται
Η μέθοδος localStorage
Η μέθοδος localStorage αποθηκεύει δεδομένα χωρίς όριο χρόνου, δηλαδή θα είναι διαθέσιμα για πάντα.
Στο παρακάτω κώδικα βλέπουμε πως αποθηκεύουμε δεδομένα και με ποιον τρόπο διαβάζουμε τα δεδομένα αυτά με την μέθοδο localStorage:
Το παρακάτω παράδειγμα μετράει τις φορές που επισκέφτηκε ένας χρήστης μια ιστοσελίδα:
Στο παρακάτω κώδικα βλέπουμε πως αποθηκεύουμε δεδομένα και με ποιον τρόπο διαβάζουμε τα δεδομένα αυτά με την μέθοδο localStorage:
Αποθήκευση δεδομένων στον client με την μέθοδο localStorage
localStorage.email="Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε. ";
document.write("email: " + localStorage.email);
document.write("email: " + localStorage.email);
Το παρακάτω παράδειγμα μετράει τις φορές που επισκέφτηκε ένας χρήστης μια ιστοσελίδα:
Αποθήκευση δεδομένων στον client με την μέθοδο localStorage
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
Η μεταβλητή localStorage.pagecount αποθηκεύεται για πάντα στον client.
