Το τοπικό αποθηκευτικό χώρο του HTML

Το τοπικό αποθηκευτικό χώρο του HTML: Προβάλλει τα cookies.

Τι είναι το τοπικό αποθηκευτικό χώρο του HTML;

Με το τοπικό αποθηκευτικό χώρο (Local Storage), οι εφαρμογές web μπορούν να αποθηκεύσουν δεδομένα τοπικά στον περιηγητή του χρήστη.

Πριν από το HTML5, τα δεδομένα της εφαρμογής μπορούσαν να αποθηκευτούν μόνο στα cookies, συμπεριλαμβανομένων των αιτημάτων του κάθε διακομιστή. Το τοπικό αποθηκευτικό χώρο είναι πιο ασφαλές και μπορεί να αποθηκεύσει μεγάλη ποσότητα δεδομένων τοπικά χωρίς να επηρεάζει την απόδοση του ιστότοπου.

Διαφορετικά από τα cookies, οι περιορισμοί αποθήκευσης είναι πολύ μεγαλύτεροι (τουλάχιστον 5MB) και οι πληροφορίες δεν μεταφέρονται στο διακομιστή.

Το τοπικό αποθηκευτικό χώρο περνάει από την πηγή (origin) (μέσω τομέα και πρωτόκολλο). Όλες οι σελίδες, από την πηγή, μπορούν να αποθηκεύσουν και να επισκεφθούν τα ίδια δεδομένα.

Υποστήριξη περιηγητή

Το πίνακα των στοιχείων δείχνει την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως το τοπικό αποθηκευτικό χώρο.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

Το αντικείμενο τοπικού αποθηκευτικού χώρου του HTML

Το HTML τοπικό αποθηκευτικό χώρο παρέχει δύο αντικείμενα για αποθήκευση δεδομένων στον πελάτη:

  • window.localStorage - Αποθήκευση δεδομένων χωρίς ημερομηνία λήξης
  • window.sessionStorage - Αποθήκευση δεδομένων για μια συνεδρία (τα δεδομένα χάνουνται όταν κλείσει η σελίδα του περιηγητή)

Όταν χρησιμοποιείς το τοπικό αποθηκευτικό χώρο, ελέγξου την υποστήριξη του περιηγητή για localStorage και sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Κώδικας για localStorage/sessionStorage
} else {
    // Συγγνώμη! Δεν υποστηρίζεται το Web Storage ..
}

Το αντικείμενο localStorage

Το αντικείμενο localStorage αποθηκεύει δεδομένα χωρίς ημερομηνία λήξης. Όταν κλείσει ο περιηγητής, τα δεδομένα δεν διαγράφονται και είναι διαθέσιμα την επόμενη ημέρα, την επόμενη εβδομάδα ή το επόμενο έτος.

Παράδειγμα

// Αποθήκευση
localStorage.setItem("lastname", "Gates");
// Ανάκτηση
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Δοκιμάστε το Προσωπικά

Παράδειγμα εξήγησης:

  • Δημιουργία ονόματος/τιμής του localStorage, όπου: name="lastname", value="Gates"
  • Ανάκτηση της τιμής του "lastname" και ενσωμάτωση σε στοιχείο με id="result"

Το παράδειγμα μπορεί επίσης να γραφτεί ως εξής:

// Αποθήκευση
localStorage.lastname = "Gates";
// Ανάκτηση
document.getElementById("result").innerHTML = localStorage.lastname;

Η σύνταξη για την αφαίρεση του στοιχείου "lastname" από το localStorage είναι η εξής:

localStorage.removeItem("lastname");

Σημείωση: Το όνομα/τιμή αποθηκεύεται πάντα ως αλφαριθμητική αλυσίδα. Αν χρειαστεί, θυμήσου να τα μετατρέψεις σε άλλη μορφή!

Το παράδειγμα αυτό αφορά τον αριθμό των κλικ που κάνει ο χρήστης στο κουμπί. Στο κώδικα, η αλφαριθμητική αλυσίδα τιμής μετατρέπεται σε αριθμητική, και ο αριθμός αυξάνεται μείον:

Παράδειγμα

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Έχετε κάνει κλικ στο κουμπί " +
localStorage.clickcount + " φορές.";

Δοκιμάστε το Προσωπικά

Το αντικείμενο sessionStorage

Το αντικείμενο sessionStorage είναι ίσο με το αντικείμενο localStorage, η διαφορά είναι ότι αποθηκεύει δεδομένα μόνο για μια session. Αν ο χρήστης κλείσει το συγκεκριμένο φυλλότυπο του browser, τα δεδομένα θα διαγραφούν.

Το παρακάτω παράδειγμα υπολογίζει τον αριθμό των κλικ που κάνει ο χρήστης στο κουμπί κατά τη διάρκεια της τρέχουσας session:

Παράδειγμα

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Σε αυτή τη session, έχετε κάνει κλικ στο κουμπί " +
sessionStorage.clickcount + " φορές.";

Δοκιμάστε το Προσωπικά