HTML5 – localStorage()

01 Ιούν 2011 | HTML

Δεν επιτρέπονται τα σχόλια.


HTML5

Η HTML5 καθημερινά κατακτά όλο και μεγαλύτερο μερίδιο στην κατασκευή ιστοσελίδων. Οι περισσότεροι Web Developers έχουν εξοικειωθεί με τις νέες ετικέτες της HTML 5 όπως είναι η ετικέτα header, section, footer και πολλοί είναι αυτοί που έχουν ακουστά την ετικέτα video. Ωστόσο η HTML5 έχει περισσότερες δυνατότητες από τις παραπάνω ετικέτες.

Σε αυτό το άρθρο θα εμβαθύνω περισσότερο στην ιδιότητα της HTML 5 localStorage(). Η localStorage στην ουσία είναι μια τοπική βάση δεδομένων στη μεριά του χρήστη που αποθηκεύει δεδομένα στη μορφή key:value. Τα δεδομένα αυτά αποθηκεύονται στον Web Browser του χρήστη.  Αυτό σημαίνει πως τα δεδομένα για το συγκεκριμένο χρήστη είναι διαθέσιμα μόνο στον συγκεκριμένο περιηγητή διαδικτύου που χρησιμοποιεί και μόνο στο συγκεκριμένο ηλεκτρονικό υπολογιστή. Να θυμάστε λοιπόν πως τα δεδομένα είναι διαθέσιμα μόνο στον περιηγητή διαδικτύου που χρησιμοποίησε ο χρήστης και όχι για το μηχάνημα που χρησιμοποίησε ο χρήστες.

Ένα μεγάλο θέμα που προκύπτει με την ιδιότητα localStorage() είναι το θέμα της συμβατότητας, όχι μόνο για την HTML 5 αλλά και για τα CSS3. Η ιδιότητα localStorage() είναι διαθέσιμη μόνο στους web browser Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+ και Chrome 4+. Η ιδιότητα localStorage() δεν υποστηρίζεται ακόμα από τον Opera. Ανάλογα με το κοινό που σας παρακολουθεί, μπορεί να αντιμετωπίσετε κάποια προβλήματα σε ότι αφορά την ιδιότητα localStorage.

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

if(typeof(localStorage) == "undefined" )
{
    alert("Ο περιηγητής διαδικτύου που χρησιμοποιείτε δεν υποστηρίζει την ιδιότητα localStorage. Δοκιμάστε να αναβαθμίσετε το λογισμικό σας.");
}
else
{
    try{
        localStorage.setItem("helloWorld", "Γεια σου κόσμε");
    }
    catch (e)
    {
        if (e == QUOTA_EXCEEDED_ERR)
        {
            alert("Ξεπεράσατε τα όρια!");
        }
    }

    document.write(localStorage.getItem("helloWorld"));

    localStorage.removeItem("helloWorld");
}

Στον παραπάνω κώδικα κάνουμε διάφορα πράγματα, όπως για παράδειγμα να ελέγξουμε αν ο web browser του χρήστη υποστηρίζει την ιδιότητα localStorage(), αποθηκεύουμε δεδομένα στη βάση δεδομένων, ανακτούμε τα δεδομένα και τα διαγράφουμε. Το παραπάνω είναι ένα απλό παράδειγμα, αλλά με λίγη δουλειά παραπάνω μπορείτε να δημιουργήσετε πραγματικά πολύ καλές εφαρμογές που θα σας βοηθήσουν να εξοικονομήσετε bandwidth και ταχύτητα στο κατά το rendering της σελίδας σας.

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php