Πολύ συχνά, η πρώτη εφαρμογή JavaScript είναι μια λίστα Todo, αλλά το πρόβλημα με τέτοιες εφαρμογές είναι ότι μετά την ανανέωση της σελίδας, όλα τα στοιχεία στη λίστα εξαφανίζονται.

Μια απλή λύση σε αυτό το πρόβλημα είναι η χρήση τοπική αποθήκευση(τοπική αποθήκευση). Η τοπική αποθήκευση σάς επιτρέπει να αποθηκεύετε δεδομένα στο μηχάνημα του χρήστη και μπορείτε εύκολα να φορτώσετε τη λίστα από αυτήν αφού ανανεώσετε τη σελίδα. Σε αυτό το άρθρο, θα γράψουμε μια μικρή λίστα εργασιών χρησιμοποιώντας τοπική αποθήκευση.

Τι είναι η τοπική αποθήκευση;

Ο τοπικός χώρος αποθήκευσης ("αποθηκευτικός χώρος ιστού") ήταν αρχικά μέρος της προδιαγραφής HTML5, αλλά τώρα έχει μεταφερθεί σε ξεχωριστό. Μπορείτε να αποθηκεύσετε δεδομένα με δύο τρόπους:

• τοπική αποθήκευση: επίμονη αποθήκευση, που θα χρησιμοποιήσουμε.
• αποθήκευση συνεδρίας: αποθηκεύει δεδομένα μόνο για αυτήν την περίοδο λειτουργίας, εάν ο χρήστης κλείσει τη σελίδα, τα δεδομένα θα χαθούν.

Η τοπική αποθήκευση σάς επιτρέπει να αποθηκεύετε δεδομένα στον υπολογιστή του χρήστη με τη μορφή ζευγών κλειδιών-τιμών και αυτά τα δεδομένα θα είναι διαθέσιμα ακόμη και μετά το κλείσιμο του προγράμματος περιήγησης ή την απενεργοποίηση του υπολογιστή.

HTML

Για να δημιουργήσουμε μια λίστα εργασιών, χρειαζόμαστε:

• Μια εισαγωγή κειμένου για την εισαγωγή του περιεχομένου του στοιχείου.
• Κουμπί για την προσθήκη ενός στοιχείου στη λίστα.
• Κουμπί για εκκαθάριση της λίστας.
• Η ίδια η λίστα
  ).
  • Και ένα επιπλέον div για εμφάνιση σφαλμάτων.

  Έτσι, η σήμανση HTML θα μοιάζει με αυτό:

  Τα καθαρίζω όλα

  Αρκετά απλή δομή, το οποίο θα ζωντανέψουμε με JavaScript.

  Επειδή χρησιμοποιούμε jQuery, πρέπει να το συμπεριλάβουμε επιπλέον.

  JavaScript

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

  $("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Προειδοποίηση!Αφήσατε κενές τις υποχρεώσεις"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

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

  // εισαγωγή καταχώρισης $("#todos").prepend("

  " + Περιγραφή + "

  "); // διαγράψτε όλα όσα έχουν απομείνει στο πεδίο κειμένου $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); επιστροφή ψευδής;));

  Για να εργαστείτε με τον τοπικό χώρο αποθήκευσης, πρέπει να παρέχετε ένα κλειδί και την αντίστοιχη τιμή του. Στην περίπτωσή μας, ας ονομάσουμε το κλειδί 'todos' και η τιμή θα είναι όλος ο κώδικας HTML που περιέχεται στη λίστα (στην ετικέτα

  ). Αυτός ο κωδικός είναι εύκολο να ληφθεί από jQuery. Και τέλος επιστρέφουμε false για να αποτρέψουμε την υποβολή της φόρμας και τη μη επαναφόρτωση της σελίδας.

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

  If (localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

  Επειδή αποθηκεύουμε έτοιμο HTMLστο αποθετήριο, τότε απλώς επικολλάμε αυτόν τον κωδικό στη λίστα.

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

  $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

  Ετοιμος! Ο πλήρης κώδικας μοιάζει με αυτό:

  $(document).ready(function() ( $("#add").click(function() ( var Description = $("#description").val(); if ($("#description"). val() == "") ( $("#alert").html(" Προειδοποίηση!Αφήσατε κενές τις υποχρεώσεις"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

  • " + Περιγραφή + "
  "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); if (localStorage .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( location.reload(); return false; )); ));

  Υποστήριξη προγράμματος περιήγησης

  Η αποθήκευση Ιστού υποστηρίζεται από όλα τα μεγάλα προγράμματα περιήγησης, ακόμη και από τον IE8. Θα πρέπει να φοβάστε μόνο το IE7 και κάτω.

  συμπέρασμα

  Η τοπική αποθήκευση σε τέτοιες μικρές εφαρμογές μπορεί να γίνει φοβερή αντικατάστασηβάση δεδομένων. Η αποθήκευση μικρών ποσοτήτων πληροφοριών δεν θα πρέπει να είναι δύσκολη.

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

  Τι είναι η τοπική αποθήκευση;

  Η τοπική αποθήκευση είναι μέρος του δικτύου αποθήκευσης, το οποίο είναι μέρος της προδιαγραφής HTML5. Υπάρχουν δύο επιλογές για την αποθήκευση δεδομένων σε ένα BOM:

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

  Με απλά λόγια, το μόνο που κάνει ο χώρος αποθήκευσης ιστού είναι να αποθηκεύει ζεύγη κλειδιών/τιμών με ένα όνομα τοπικά και, σε αντίθεση με τα cookie, αυτά τα δεδομένα παραμένουν ακόμα και αν κλείσετε το πρόγραμμα περιήγησής σας ή απενεργοποιήσετε τον υπολογιστή σας.

  Εάν σκεφτόμαστε μια λίστα υποχρεώσεων, τότε θα χρειαστείτε τα εξής:

  • Είσοδος, όπου θα είναι δυνατή η τοποθέτηση της λίστας μας
  • Κουμπί Enter για προσθήκη λίστας
  • Κουμπί για να διαγράψετε ολόκληρο το ημερολόγιο
  • Ένα μη ταξινομημένο κοντέινερ λίστας όπου η λίστα μας θα τοποθετηθεί σε μια λίστα στοιχείων
  • Και τέλος, χρειαζόμαστε ένα κοντέινερ DIV για να εμφανίζεται μια ειδοποίηση όταν προσπαθείτε να εισαγάγετε μια κενή εργασία.

  Οπότε το HTML μας θα πρέπει να μοιάζει κάπως έτσι:

  Τα καθαρίζω όλα

  Είναι ένα αρκετά τυπικό κοντέινερ HTML και με τη JavaScript μας μπορούμε να το συμπληρώσουμε όλο με δυναμικό περιεχόμενο.

  Εφόσον θα χρησιμοποιήσουμε το jQuery σε αυτό το παράδειγμα, θα πρέπει επίσης να το συμπεριλάβετε στο έγγραφο HTML.

  JavaScript

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

  $("#add").click(function() ( var Description = $("#description").val(); //εάν η δουλειά είναι άδεια if($("#description").val( ) == "") ( $("#alert").html(" Προειδοποίηση!Αφήσατε κενές τις υποχρεώσεις"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

  Το μόνο που κάναμε ήταν να δοκιμάσουμε το κλικ στο κουμπί Προσθήκη και να εκτελέσουμε μια απλή δοκιμή για να δούμε αν ο χρήστης συμπλήρωσε την εισαγωγή με κάτι. Αν όχι, τότε το div ειδοποίησης εμφανίζεται και παραμένει για 1000 ms και μετά εξαφανίζεται.

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

  // προσθέστε το στοιχείο της λίστας $("#todos").prepend("

  " + Περιγραφή + "

  "); // διαγράψτε οτιδήποτε υπάρχει στην είσοδο $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); επιστροφή ψεύτικο;));

  Όπως μπορείτε να δείτε, αυτό είναι αρκετά τυπικό jQuery και όταν πρόκειται για τοπική αποθήκευση πρέπει να αποθηκεύσουμε το κλειδί και την τιμή. Το κλειδί είναι ένα όνομα που δίνουμε στους εαυτούς μας, σε αυτήν την περίπτωση θα το ονομάσουμε απλώς "Todos", μετά πρέπει να ορίσουμε τι θέλουμε να αποθηκεύσουμε, το οποίο σε αυτήν την περίπτωση είναι όλο το HTML που βρίσκεται μέσα στο Todos της μη ταξινομημένης λίστας. Όπως μπορείτε να δείτε, καταγράψαμε τα πάντα με το jQuery και τελικά επιστρέψαμε το “false” (false) για να μην εγκαταλείψει η φόρμα και να μην ανανεωθεί η σελίδα μας.

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

  // αν έχουμε κάτι σε τοπικό χώρο αποθήκευσης που if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

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

  // διαγραφή όλου του τοπικού αποθηκευτικού χώρου $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

  Ο πλήρης κώδικας μοιάζει με αυτό:
  

  $("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Προειδοποίηση!Αφήσατε κενές τις υποχρεώσεις"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

  " + Περιγραφή + "

  "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); if(localStorage .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( location.reload(); return false; ));

  Υποστήριξη προγράμματος περιήγησης

  Η υποστήριξη του Web Storage είναι αρκετά καλή για την προδιαγραφή HTML5, υποστηρίζεται από όλα τα μεγάλα προγράμματα περιήγησης, ακόμη και από τον IE8.

  Μετάφραση: Vlad Merzhevich

  Η επίμονη τοπική αποθήκευση είναι ένας τομέας όπου οι εφαρμογές πελάτη έχουν πλεονεκτήματα έναντι των εφαρμογών διακομιστή. Για εφαρμογές όπως λειτουργικό σύστημα, παρέχει ένα επίπεδο αφαίρεσης για την αποθήκευση και την ανάκτηση δεδομένων όπως ρυθμίσεις ή κατάσταση εκτέλεσης. Αυτές οι τιμές μπορεί να αποθηκευτούν στο μητρώο, αρχεία INI, αρχεία XML ή αλλού, ανάλογα με τις αρχές της πλατφόρμας. Εάν η εφαρμογή πελάτη σας χρειάζεται τοπική αποθήκευση για κάτι περισσότερο από ένα ζεύγος κλειδιών/τιμών, μπορείτε να εισαγάγετε τη δική σας βάση δεδομένων, να δημιουργήσετε τη δική σας μορφή αρχείου ή οποιεσδήποτε άλλες λύσεις.

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

  • Τα cookies περιλαμβάνονται σε κάθε αίτημα HTTP, επιβραδύνοντας έτσι την εφαρμογή web σας στέλνοντας άσκοπα τα ίδια δεδομένα ξανά και ξανά.
  • Τα cookies περιλαμβάνονται σε κάθε αίτημα HTTP όταν τα δεδομένα μεταδίδονται μέσω του Διαδικτύου σε μη κρυπτογραφημένη μορφή (ακόμη και αν ολόκληρη η εφαρμογή Ιστού μεταδίδεται μέσω SSL).
  • Τα cookies περιορίζονται σε περίπου 4 KB δεδομένων - αρκετά για να επιβραδύνουν την εφαρμογή σας (βλ. παραπάνω), αλλά όχι αρκετά για να είναι χρήσιμα.

  Να τι πραγματικά θέλουμε:

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

  Πριν από την HTML5, όλες οι προσπάθειες για να επιτευχθεί αυτό κατέληγαν με διάφορους τρόπους.

  Μια σύντομη ιστορία της τοπικής αποθήκευσης πριν από την HTML5

  Στην αρχή ήταν μόνο ένας Internet Explorer. Τουλάχιστον η Microsoft ήθελε να το σκέφτεται ο κόσμος. Για το σκοπό αυτό, ως μέρος του Πρώτου Μεγάλου Πολέμου των Browser, η Microsoft επινόησε πολλά πράγματα και τα συμπεριέλαβε στο πρόγραμμα περιήγησής της που τελείωσε τον πόλεμο, τον Internet Explorer. Ένα από αυτά τα πράγματα ονομάζεται Συμπεριφορές DHTML και μία από τις συμπεριφορές ονομάζεται userData.

  Το UserData επιτρέπει σε μια ιστοσελίδα να αποθηκεύει έως και 64 KB δεδομένων ανά τομέα σε μια ιεραρχική δομή παρόμοια με XML. Οι αξιόπιστοι τομείς, όπως οι ιστότοποι intranet, μπορούν να αποθηκεύσουν δέκα φορές περισσότερο. Και hey, 640kb θα πρέπει να είναι αρκετά για όλους. Ο IE δεν έχει παράσχει κανέναν τρόπο αλλαγής αυτών των συμβάσεων, επομένως δεν υπάρχει τρόπος να αυξηθεί η διαθέσιμη μνήμη.

  Το 2002, η Adobe εισήγαγε μια δυνατότητα στο Flash 6 που δεν ήταν επιτυχής και ονομάστηκε παραπλανητικά "Flash cookies". Στο Flash, αυτή η δυνατότητα είναι πιο σωστά γνωστή ως Local Shared Objects (τοπικά προσβάσιμα αντικείμενα, LSO). Εν ολίγοις, επιτρέπει σε αντικείμενα Flash να αποθηκεύουν έως και 100 KB δεδομένων ανά τομέα. Ο Brad Neuberg ανέπτυξε ένα πρώιμο πρωτότυπο μιας γέφυρας μεταξύ Flash και JavaScript που το ονόμασε AMASS (AJAX Massive Storage System), αλλά περιοριζόταν από ορισμένες ιδιορρυθμίες σχεδιασμού Flash. Μέχρι το 2006, με την εμφάνιση του ExternalInterface στο Flash 8, η πρόσβαση στο LSO μέσω JavaScript είχε γίνει μια τάξη μεγέθους ευκολότερη και ταχύτερη. Ο Μπραντ ξαναέγραψε το AMASS και το ενσωμάτωσε στο δημοφιλές Dojo Toolkit με το ψευδώνυμο dojox.storage. Το Flash "δωρεάν" δίνει σε κάθε τομέα 100 kb αποθηκευτικού χώρου. Επιπλέον, προτρέπει τον χρήστη να αυξήσει τον αποθηκευτικό χώρο κατά μια τάξη μεγέθους (1 MB, 10 MB, κ.λπ.) όταν του ζητηθεί.

  if (Modernizr.localstorage) (
  // window.localStorage είναι διαθέσιμο!
  ) άλλο (
  // δεν υπάρχει ενσωματωμένη υποστήριξη για αποθήκευση HTML5
  }

  Χρήση αποθήκευσης HTML5

  Η αποθήκευση HTML5 βασίζεται στα ονόματα των ζευγών κλειδιών/τιμών. Αποθηκεύετε πληροφορίες με βάση ένα όνομα κλειδιού και, στη συνέχεια, μπορείτε να ανακτήσετε αυτά τα δεδομένα με το ίδιο κλειδί. Το όνομα κλειδιού είναι μια συμβολοσειρά. Τα δεδομένα μπορούν να είναι οποιοσδήποτε τύπος υποστηρίζει η JavaScript, συμπεριλαμβανομένων συμβολοσειρών, δυαδικών σημείων, ακεραίων ή αριθμών κινητής υποδιαστολής. Ωστόσο, τα δεδομένα αποθηκεύονται στην πραγματικότητα ως συμβολοσειρά. Εάν δεν αποθηκεύετε και ανακτάτε συμβολοσειρές, θα χρειαστεί να χρησιμοποιήσετε συναρτήσεις όπως parseInt() ή parseFloat() για να μεταφράσετε τα ληφθέντα δεδομένα στους σωστούς τύπους JavaScript.

  Διεπαφή αποθήκευσης (
  Λήψη μέσω getItem(key);
  Ρύθμιση μέσω setItem (κλειδί, δεδομένα).
  };

  Η κλήση της setItem() με ένα υπάρχον όνομα κλειδιού θα αντικαταστήσει σιωπηλά την προηγούμενη τιμή. Η κλήση της getItem() με ένα ανύπαρκτο κλειδί θα επιστρέψει NULL αντί να δημιουργήσει μια εξαίρεση.

  όπως άλλοι Αντικείμενα JavaScriptμπορείτε να αποκτήσετε πρόσβαση στο αντικείμενο localStorage ως συσχετιστικό πίνακα. Αντί να χρησιμοποιείτε τις μεθόδους getItem() και setItem(), μπορείτε απλώς να χρησιμοποιήσετε αγκύλες. Για παράδειγμα αυτό το κομμάτι κώδικα

  var foo = localStorage.getItem("bar");
  // ...
  localStorage.setItem("bar", foo);

  μπορεί να ξαναγραφτεί χρησιμοποιώντας σύνταξη αγκύλων:

  var foo = localStorage["bar"];
  // ...
  localStorage["bar"] = foo;

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

  Διεπαφή αποθήκευσης (
  Κατάργηση μέσω removeItem(key);
  Σαφή();
  }

  Η κλήση της removeItem() με ένα κλειδί που δεν υπάρχει δεν θα επιστρέψει τίποτα.

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

  Διεπαφή αποθήκευσης (
  μήκος
  Λήψη κλειδιού (μη αρνητικός ακέραιος).
  }

  Εάν, όταν καλείται η key(), το ευρετήριο δεν βρίσκεται στην περιοχή από 0 έως (μήκος-1), τότε η συνάρτηση θα επιστρέψει null.

  Παρακολούθηση της περιοχής αποθήκευσης HTML5

  Εάν θέλετε να παρακολουθείτε τις αλλαγές αποθήκευσης μέσω προγραμματισμού, πρέπει να παρακολουθήσετε το συμβάν αποθήκευσης. Αυτό το συμβάν εμφανίζεται στο αντικείμενο του παραθύρου όταν καλούνται οι setItem() , removeItem() ή clear() και αλλάζουν κάτι. Για παράδειγμα, εάν ορίσετε μια υπάρχουσα τιμή ή καλέσετε την clear() όταν δεν υπάρχουν κλειδιά, τότε το συμβάν δεν θα ενεργοποιηθεί επειδή η περιοχή αποθήκευσης δεν έχει αλλάξει στην πραγματικότητα.

  Το συμβάν αποθήκευσης υποστηρίζεται όπου εκτελείται το αντικείμενο localStorage, συμπεριλαμβανομένου του Internet Explorer 8. Ο IE 8 δεν υποστηρίζει το πρότυπο W3C addEventListener (αν και τελικά θα προστεθεί στον IE 9), επομένως για να καταλάβετε το συμβάν αποθήκευσης, πρέπει να ελέγξετε ποιο μηχανή συμβάντων που υποστηρίζει πρόγραμμα περιήγησης (αν το έχετε κάνει στο παρελθόν με άλλα συμβάντα, μπορείτε να παραλείψετε αυτήν την ενότητα μέχρι το τέλος). Η παγίδευση του συμβάντος αποθήκευσης λειτουργεί με τον ίδιο τρόπο όπως η παγίδευση άλλων συμβάντων. Εάν προτιμάτε να χρησιμοποιήσετε jQuery ή κάποιο άλλο Βιβλιοθήκη JavaScriptγια να καταχωρήσετε χειριστές συμβάντων, μπορείτε να το κάνετε αυτό και με τον χώρο αποθήκευσης.

  if (window.addEventListener) (
  window.addEventListener("storage", handle_storage, false);
  ) άλλο (
  window.attachEvent("onstorage", handle_storage);
  };

  Η επανάκληση handle_storage θα κληθεί με ένα αντικείμενο StorageEvent, εκτός από τον Internet Explorer, όπου τα συμβάντα αποθηκεύονται στο window.event .

  λειτουργία handle_storage(e) (
  εάν (!e) (e = παράθυρο.γεγονός; )
  }

  Σε αυτήν την περίπτωση, η μεταβλητή e θα είναι ένα αντικείμενο StorageEvent, το οποίο έχει τις ακόλουθες χρήσιμες ιδιότητες.

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

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

  Περιορισμοί σε τρέχοντα προγράμματα περιήγησης

  Μιλώντας για την ιστορία της τοπικής αποθήκευσης με πρόσθετα τρίτων, ανέφερα τους περιορισμούς κάθε τεχνικής. Θυμήθηκα ότι δεν είχα πει τίποτα για τους περιορισμούς του πλέον τυπικού αποθηκευτικού χώρου HTML5. Θα σας δώσω τις απαντήσεις και μετά θα τις εξηγήσω. Οι απαντήσεις, κατά σειρά σπουδαιότητας, είναι: "5 megabyte", "QUOTA_EXCEEDED_ERR" και "κανένα".

  "5 megabyte" - πόσος χώρος αποθήκευσης παρέχεται από προεπιλογή. Αυτή η τιμή είναι απροσδόκητα η ίδια σε όλα τα προγράμματα περιήγησης, παρόλο που διατυπώνεται ως τίποτα περισσότερο από μια πρόταση στην προδιαγραφή HTML5. Πρέπει να καταλάβετε ότι αποθηκεύετε συμβολοσειρές, όχι δεδομένα στην αρχική τους μορφή. Εάν αποθηκεύετε πολλούς ακέραιους αριθμούς ή αριθμούς κινητής υποδιαστολής, η διαφορά στην αναπαράσταση μπορεί να είναι μεγάλη. Κάθε ψηφίο σε έναν αριθμό κινητής υποδιαστολής αποθηκεύεται ως χαρακτήρας, όχι στη συνήθη αναπαράσταση για τέτοιους αριθμούς.

  Το "QUOTA_EXCEEDED_ERR" είναι η εξαίρεση που λαμβάνετε εάν υπερβείτε το όριο των 5 MB. «Όχι» είναι η απάντηση στην επόμενη προφανή ερώτηση: «Μπορώ να ζητήσω από τον χρήστη περισσότερο χώρο αποθήκευσης;». Τη στιγμή της γραφής, τα προγράμματα περιήγησης δεν εφαρμόζουν κανένα μηχανισμό για τους προγραμματιστές ιστού να ζητούν περισσότερο χώρο αποθήκευσης. Ορισμένα προγράμματα περιήγησης (όπως το Opera) επιτρέπουν στον χρήστη να ελέγχει τα όρια αποθήκευσης ανά τοποθεσία, αλλά αυτό είναι καθαρά πρωτοβουλία χρήστη και δεν έχει καμία σχέση με αυτό που μπορείτε, ως προγραμματιστής, να ενσωματώσετε στην εφαρμογή Ιστού σας.

  Αποθηκευτικός χώρος HTML5 σε δράση

  Ας ρίξουμε μια ματιά στον χώρο αποθήκευσης HTML5 σε δράση. Ας επιστρέψουμε σε αυτό που φτιάξαμε στο κεφάλαιο του σχεδίου. Υπάρχει ένα μικρό πρόβλημα με αυτό το παιχνίδι: αν κλείσετε το παράθυρο του προγράμματος περιήγησης στη μέση του παιχνιδιού, θα χάσετε τα αποτελέσματα. Αλλά με την αποθήκευση HTML5, μπορούμε να αποθηκεύσουμε το παιχνίδι στη θέση του, στο ίδιο το πρόγραμμα περιήγησης. Ανοίξτε την επίδειξη, κάντε μερικές κινήσεις, κλείστε την καρτέλα του προγράμματος περιήγησης και, στη συνέχεια, ανοίξτε την ξανά. Εάν το πρόγραμμα περιήγησής σας υποστηρίζει αποθήκευση HTML5, η δοκιμαστική σελίδα θα θυμάται με μαγικό τρόπο την ακριβή θέση σας στο παιχνίδι, συμπεριλαμβανομένων των πόσων κινήσεων κάνατε, της θέσης κάθε κομματιού στον πίνακα, ακόμη και του επιλεγμένου κομματιού.

  Πως δουλεύει? Κάθε φορά που υπάρχει μια αλλαγή στο παιχνίδι, θα καλούμε αυτή τη λειτουργία.

  συνάρτηση saveGameState() (
  
  localStorage["halma.game.in.progress"] = gGameInProgress;
  για (var i = 0; i< kNumPieces; i++) {
  localStorage["halma.piece." + i + ".row"] = gPieces[i].row;
  localStorage["halma.piece." + i + ".column"] = gPieces[i].column;
  }
  localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
  localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
  localStorage["halma.movecount"] = gMoveCount;
  επιστροφή αληθινή?
  }

  Όπως μπορείτε να δείτε, το αντικείμενο localStorage χρησιμοποιείται για την αποθήκευση της προόδου του παιχνιδιού (gGameInProgress , boolean). Στη συνέχεια, όλες οι μάρκες ταξινομούνται (gPieces, Συστοιχία JavaScript) και αποθηκεύστε μια γραμμή και στήλη για το καθένα. Μετά από αυτό, αποθηκεύονται ορισμένες επιπλέον καταστάσεις παιχνιδιού, συμπεριλαμβανομένου του τρέχοντος επιλεγμένου κομματιού (gSelectedPieceIndex , ένας ακέραιος αριθμός), του κομματιού που βρίσκεται στη μέση μιας μεγάλης σειράς άλματα (gSelectedPieceHasMoved , boolean) και συνολικός αριθμόςκινήσεις που έγιναν (gMoveCount , ακέραιος).

  Όταν η σελίδα φορτώνεται, αντί να καλούμε αυτόματα τη συνάρτηση newGame(), η οποία θα επέστρεφε όλες τις μεταβλητές στις αρχικές τους τιμές, καλούμε resumeGame() . Η συνάρτηση resumeGame() χρησιμοποιεί το χώρο αποθήκευσης HTML5 για να ελέγξει την κατάσταση του παιχνιδιού στο τοπικό κατάστημα. Εάν υπάρχει, επαναφέρει τις τιμές χρησιμοποιώντας το αντικείμενο localStorage.

  συνάρτηση resumeGame() (
  if (!supportsLocalStorage()) ( return false; )
  gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
  εάν (!gGameInProgress) (επιστροφή ψευδής; )
  gPieces = νέος πίνακας (kNumPieces);
  για (var i = 0; i< kNumPieces; i++) {
  var row = parseInt(localStorage["halma.piece." + i + ".row"]);
  var στήλη = parseInt(localStorage["halma.piece." + i + ".column"]);
  gPieces[i] = νέο κελί(σειρά, στήλη);
  }
  gNumPieces = kNumPieces;
  gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
  gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "αληθές";
  gMoveCount = parseInt(localStorage["halma.movecount"]);
  drawBoard();
  επιστροφή αληθινή?
  }

  Το πιο σημαντικό μέρος αυτής της δυνατότητας είναι η προειδοποίηση που ανέφερα νωρίτερα σε αυτό το κεφάλαιο και θα επαναλάβω εδώ: τα δεδομένα αποθηκεύονται ως συμβολοσειρές. Εάν αποθηκεύετε κάτι διαφορετικό από συμβολοσειρές, θα πρέπει να τις μετατρέψετε όταν τις λάβετε. Για παράδειγμα, η σημαία παιχνιδιού σε εξέλιξη (gGameInProgress ) είναι boolean. Στη συνάρτηση saveGameState(), απλώς την αποθηκεύουμε και δεν ανησυχούμε για τον τύπο δεδομένων.

  localStorage["halma.game.in.progress"] = gGameInProgress;

  Αλλά στη συνάρτηση resumeGame(), πρέπει να θεωρήσουμε την τιμή που ανακτήθηκε από την τοπική αποθήκευση ως συμβολοσειρά και να δημιουργήσουμε με μη αυτόματο τρόπο τη δική μας δυαδική τιμή.

  gGameInProgress = (localStorage["halma.game.in.progress"] == "true");

  Ομοίως, ο αριθμός των κινήσεων αποθηκεύεται στο gMoveCount ως ακέραιος, στη συνάρτηση saveGameState() απλώς τον αποθηκεύουμε.

  localStorage["halma.movecount"] = gMoveCount;

  Αλλά στη συνάρτηση resumeGame(), πρέπει να μετατρέψουμε την τιμή σε έναν ακέραιο χρησιμοποιώντας το ενσωματωμένο Λειτουργία JavaScript parseInt() .

  gMoveCount = parseInt(localStorage["halma.movecount"]);

  Beyond Key/Value Pair: Competitive Vision

  Ενώ υπήρξαν πολλά κόλπα και λύσεις στην ιστορία, η τρέχουσα κατάσταση του χώρου αποθήκευσης HTML5 είναι εκπληκτικά ασφαλής. Το νέο API έχει τυποποιηθεί και περιλαμβάνεται σε όλα τα μεγάλα προγράμματα περιήγησης, πλατφόρμες και συσκευές. Για έναν προγραμματιστή ιστού, δεν το βλέπεις αυτό κάθε μέρα, σωστά; Αλλά είναι περισσότερα από "5 megabyte ζεύγη κλειδιών/τιμών" και το μέλλον της επίμονης τοπικής αποθήκευσης είναι... πώς να το πούμε... λοιπόν, ένα ανταγωνιστικό όραμα.

  Το One vision είναι ένα αρκτικόλεξο που ήδη γνωρίζετε - SQL. Το 2007, η Google κυκλοφόρησε το Gears, μια προσθήκη ανοιχτού κώδικα μεταξύ προγραμμάτων περιήγησης. πηγαίος κώδικας, το οποίο περιλαμβάνει μια ενσωματωμένη βάση δεδομένων που βασίζεται σε SQLite. Αυτό το πρώιμο πρωτότυπο επηρέασε αργότερα τη δημιουργία της προδιαγραφής της βάσης δεδομένων Web SQL. Η βάση δεδομένων Web SQL (παλαιότερα γνωστή ως "WebDB") παρέχει ένα λεπτό περιτύλιγμα γύρω από τη βάση δεδομένων SQL που σας επιτρέπει να κάνετε τα ακόλουθα πράγματα από τη JavaScript:

  openDatabase("documents", "1.0", "Local document storage", 5*1024*1024, function (db) (
  db.changeVersion("", "1.0", συνάρτηση (t) (
  t.executeSql("CREATE TABLE docids (id, name)");
  ), λάθος);
  });

  Όπως μπορείτε να δείτε, οι περισσότερες από τις ενέργειες είναι στη γραμμή με τη μέθοδο ExecuteSQL. Αυτή η συμβολοσειρά μπορεί να υποστηρίξει οποιαδήποτε εντολή SQL, συμπεριλαμβανομένων των SELECT, UPDATE, INSERT και DELETE. Είναι σαν προγραμματισμός βάσεων δεδομένων από την πλευρά του διακομιστή, μόνο που το κάνετε με JavaScript! Ω χαρά!

  Η προδιαγραφή της βάσης δεδομένων Web SQL έχει εφαρμοστεί σε τέσσερα προγράμματα περιήγησης και πλατφόρμες.

  Υποστήριξη βάσης δεδομένων Web SQL

  ΔΗΛ	Firefox	σαφάρι	Χρώμιο	ΛΥΡΙΚΗ ΣΚΗΝΗ	iPhone	Android
  –	–	4.0+	4.0+	10.5+	3.0+	2.0+

  Φυσικά, εάν έχετε χρησιμοποιήσει περισσότερες από μία βάσεις δεδομένων στη ζωή σας, τότε ξέρετε ότι το "SQL" είναι περισσότερο όρος μάρκετινγκ παρά σκληρός και γρήγορος. γρήγορο πρότυπο(κάποιος μπορεί να πει το ίδιο για την HTML5, αλλά δεν πειράζει). Φυσικά, υπάρχει μια πραγματική προδιαγραφή SQL (λέγεται SQL-92), αλλά δεν υπάρχει διακομιστής βάσης δεδομένων στον κόσμο που να συμμορφώνεται μόνο με αυτήν την προδιαγραφή. Υπάρχει Oracle SQL, Microsoft SQL, SQL σε MySQL, SQL σε PostgreSQL, SQL σε SQLite. Στην πραγματικότητα, καθένα από αυτά τα προϊόντα προσθέτει νέες δυνατότητες με την πάροδο του χρόνου. Συναρτήσεις SQL, επομένως δεν αρκεί να πούμε καν "SQL στο SQLite". Θα πρέπει να πείτε "η έκδοση της SQL που συνοδεύεται από την έκδοση SQLite X.Y.Z".

  Όλα αυτά μας φέρνουν στην επόμενη προειδοποίηση, που αυτή τη στιγμή τοποθετείται στην κορυφή της προδιαγραφής Web SQL.

  Η προδιαγραφή έχει φτάσει σε αδιέξοδο: όλοι οι ενδιαφερόμενοι προγραμματιστές χρησιμοποιούν SQL από την πλευρά του διακομιστή (SQLite), αλλά χρειαζόμαστε αρκετές ανεξάρτητες υλοποιήσεις για να προχωρήσουμε στην πορεία τυποποίησης. Ενώ άλλοι προγραμματιστές ενδιαφέρονται να εφαρμόσουν αυτήν την προδιαγραφή, η περιγραφή της διαλέκτου SQL έχει αφεθεί ως απλή αναφορά στο Sqlite, το οποίο δεν είναι αποδεκτό από το πρότυπο.

  Σε αυτό το πλαίσιο θα σας πω για ένα άλλο ανταγωνιστικό όραμα για προηγμένο, επίμονο τοπικό χώρο αποθήκευσης για εφαρμογές Ιστού: το Indexed Database API, παλαιότερα γνωστό ως "WebSimpleDB", που τώρα αναφέρεται στοργικά ως IndexedDB.

  Το Indexed Database API παρέχει αυτό που ονομάζεται αποθήκευση αντικειμένων, με πολλές ιδέες δανεισμένες από βάσεις δεδομένων SQL. Υπάρχουν "βάσεις δεδομένων" με "εγγραφές", κάθε εγγραφή έχει έναν ορισμένο αριθμό "πεδίων". Κάθε πεδίο έχει έναν συγκεκριμένο τύπο δεδομένων, ο οποίος ορίζεται κατά τη δημιουργία της βάσης δεδομένων. Μπορείτε να επιλέξετε μέρος των καταχωρήσεων και, στη συνέχεια, να τις καταχωρήσετε με τον "δρομέα". Οι αλλαγές στο χώρο αποθήκευσης αντικειμένων υποβάλλονται σε επεξεργασία με "συναλλαγές".

  Εάν έχετε προγραμματίσει ποτέ βάσεις δεδομένων SQL, αυτοί οι όροι είναι πιθανώς γνωστοί σε εσάς. Η κύρια διαφορά είναι ότι η αποθήκευση αντικειμένων δεν έχει δομημένη γλώσσα ερωτημάτων. Δεν γράφετε μια συνθήκη όπως "ΕΠΙΛΟΓΗ * από ΧΡΗΣΤΕΣ όπου ΕΝΕΡΓΟ = "Y"". Αντίθετα, χρησιμοποιούμε τις μεθόδους που παρέχονται από το αντικείμενο αποθήκευσης για να ανοίξουμε τη βάση δεδομένων USERS, να απαριθμήσουμε τις εγγραφές, να φιλτράρουμε τις εγγραφές μας και να χρησιμοποιήσουμε μεθόδους πρόσβασης για να λάβουμε την τιμή κάθε πεδίου των υπόλοιπων εγγραφών. Μια πρώιμη περιγραφή του IndexedDB είναι ένας καλός οδηγός για το πώς λειτουργεί το IndexedDB και πώς το IndexedDB συγκρίνεται με το Web SQL.

  Κατά τη στιγμή της σύνταξης, το IndexedDB είχε εφαρμοστεί μόνο στην έκδοση beta του Firefox 4. Αντίθετα, η Mozilla δήλωσε ότι δεν θα εφαρμόσει ποτέ το Web SQL. Η Google έχει δηλώσει ότι εξετάζει το ενδεχόμενο υποστήριξης IndexedDB για το Chromium και Google Chrome. Και ακόμη και η Microsoft έχει πει ότι το IndexedDB είναι "μια εξαιρετική λύση για τον Ιστό".

  Τι μπορείτε να κάνετε ως προγραμματιστής ιστού με το IndexedDB; Στο αυτή τη στιγμήπρακτικά τίποτα εκτός από κάποιες τεχνολογικές επιδείξεις. Σε ένα χρόνο? Μπορεί.

  ο Web Storage APIπαρέχει μηχανισμούς με τους οποίους τα προγράμματα περιήγησης μπορούν να αποθηκεύουν ζεύγη κλειδιών/τιμών, με πολύ πιο διαισθητικό τρόπο από τη χρήση cookies.

  Έννοιες και χρήση του χώρου αποθήκευσης Ιστού

  Οι δύο μηχανισμοί μέσα στο Web Storage είναι οι εξής:

  • Το sessionStorage διατηρεί μια ξεχωριστή περιοχή αποθήκευσης για κάθε δεδομένη προέλευση που είναι διαθέσιμη για τη διάρκεια της περιόδου σύνδεσης της σελίδας (εφόσον το πρόγραμμα περιήγησης είναι ανοιχτό, συμπεριλαμβανομένων των επαναφορτώσεων και επαναφοράς σελίδας)
    • Αποθηκεύει δεδομένα μόνο για μια περίοδο λειτουργίας, που σημαίνει ότι τα δεδομένα αποθηκεύονται μέχρι να κλείσει το πρόγραμμα περιήγησης (ή η καρτέλα).
    • Τα δεδομένα δεν μεταφέρονται ποτέ στον διακομιστή.
    • Το όριο αποθήκευσης είναι μεγαλύτερο από ένα cookie (το πολύ 5 MB).
  • Το localStorage κάνει το ίδιο πράγμα, αλλά παραμένει ακόμα και όταν το πρόγραμμα περιήγησης είναι κλειστό και ανοιχτό ξανά.
    • Αποθηκεύει δεδομένα χωρίς ημερομηνία λήξης και διαγράφονται μόνο μέσω JavaScript ή εκκαθάρισης της προσωρινής μνήμης του προγράμματος περιήγησης / τοπικά αποθηκευμένα δεδομένα.
    • Το όριο αποθήκευσης είναι το μέγιστο μεταξύ των τριών.

  Προδιαγραφές

  Προσδιορισμός	Κατάσταση	Σχόλιο
  HTML Living Standard	Βιωτικο επιπεδο

  Συμβατότητα προγράμματος περιήγησης

  Window.localStorage

  https://github.com/mdn/browser-compat-data και στείλτε μας ένα αίτημα έλξης.

  	Επιφάνεια εργασίας						Κινητό
  	Χρώμιο	άκρη	Firefox	Internet Explorer	ΛΥΡΙΚΗ ΣΚΗΝΗ	σαφάρι	android webview	Chrome για Android	Firefox για Android	Opera για Android	Safari σε iOS	Samsung Internet
  τοπική αποθήκευση	Πλήρης υποστήριξη Chrome 4	Πλήρης υποστήριξη Edge 12	Πλήρης υποστήριξη Firefox 3.5	IE Πλήρης υποστήριξη 8	Opera Πλήρης υποστήριξη 10.5	Πλήρης υποστήριξη Safari 4

  Θρύλος

  Πλήρης υποστήριξηΠλήρης υποστήριξη

  Window.sessionStorage

  Ο πίνακας συμβατότητας σε αυτήν τη σελίδα δημιουργείται από δομημένα δεδομένα. Εάν θέλετε να συνεισφέρετε στα δεδομένα, ρίξτε μια ματιά στη διεύθυνση https://github.com/mdn/browser-compat-data και στείλτε μας ένα αίτημα έλξης.

  Ενημερώστε τα δεδομένα συμβατότητας στο GitHub

  	Επιφάνεια εργασίας						Κινητό
  	Χρώμιο	άκρη	Firefox	Internet Explorer	ΛΥΡΙΚΗ ΣΚΗΝΗ	σαφάρι	android webview	Chrome για Android	Firefox για Android	Opera για Android	Safari σε iOS	Samsung Internet
  sessionStorage	Πλήρης υποστήριξη Chrome 5	Πλήρης υποστήριξη Edge 12	Πλήρης υποστήριξη Firefox 2	IE Πλήρης υποστήριξη 8	Opera Πλήρης υποστήριξη 10.5	Πλήρης υποστήριξη Safari 4	WebView Android Πλήρης υποστήριξη Ναι	Chrome Android Πλήρης υποστήριξη Ναι	Firefox Android Πλήρης υποστήριξη Ναι	Opera Android Πλήρης υποστήριξη 11	Safari iOS Πλήρης υποστήριξη 3.2	Samsung Internet Android Πλήρης υποστήριξη Ναι

  Θρύλος

  Πλήρης υποστήριξηΠλήρης υποστήριξη

  Ιδιωτική περιήγηση / Λειτουργίες ανώνυμης περιήγησης

  Τα περισσότερα σύγχρονα προγράμματα περιήγησης υποστηρίζουν μια επιλογή απορρήτου που ονομάζεται "Incognito", "Private Browsing" ή κάτι παρόμοιο που δεν αποθηκεύει δεδομένα όπως το ιστορικό και τα cookie. Αυτό είναι θεμελιωδώς ασύμβατο με τον χώρο αποθήκευσης Ιστού για προφανείς λόγους. Ως εκ τούτου, οι προμηθευτές προγραμμάτων περιήγησης πειραματίζονται με διαφορετικούς σενάρια για τον τρόπο αντιμετώπισης αυτής της ασυμβατότητας.

  Τα περισσότερα προγράμματα περιήγησης έχουν επιλέξει μια στρατηγική όπου τα API αποθήκευσης εξακολουθούν να είναι διαθέσιμα και φαινομενικά πλήρως λειτουργικά, με μια μεγάλη διαφορά ότι όλα τα αποθηκευμένα δεδομένα διαγράφονται μετά το κλείσιμο του προγράμματος περιήγησης. Για αυτά τα προγράμματα περιήγησης εξακολουθούν να υπάρχουν διαφορετικές ερμηνείες για το τι πρέπει να γίνει με τα υπάρχοντα αποθηκευμένα δεδομένα (από μια κανονική περίοδο περιήγησης). Πρέπει να είναι διαθέσιμο για ανάγνωση όταν βρίσκεται σε Ιδιωτική λειτουργία; Στη συνέχεια, υπάρχουν ορισμένα προγράμματα περιήγησης, κυρίως το Safari, που επέλεξαν μια λύση όπου ο χώρος αποθήκευσης είναι διαθέσιμος, αλλά είναι κενός και έχει εκχωρηθεί όριο 0 byte, καθιστώντας ουσιαστικά αδύνατη την εγγραφή δεδομένων σε αυτόν.

  Οι προγραμματιστές θα πρέπει να γνωρίζουν αυτές τις διαφορετικές υλοποιήσεις και να τις λαμβάνουν υπόψη κατά την ανάπτυξη ιστότοπων ανάλογα με τα API αποθήκευσης Ιστού. Για περισσότερες πληροφορίες, ρίξτε μια ματιά σε αυτήν την ανάρτηση ιστολογίου WHATWG που ασχολείται ειδικά με αυτό το θέμα.

  Έστειλε ένα άρθρο με μια ιστορία σχετικά με το HTML5 LocalStorage σε προγράμματα περιήγησης. Ας του δώσουμε τον λόγο.

  Προσπάθησα να γράψω τον πιο απλό και κατανοητό οδηγό για τη χρήση της τεχνολογίας localStorage. Το άρθρο αποδείχθηκε αρκετά μικρό, λόγω του γεγονότος ότι τόσο η ίδια η τεχνολογία όσο και τα μέσα εργασίας με αυτήν δεν φέρουν τίποτα περίπλοκο. Χρειάζεται μόνο να γνωρίζετε λίγο JavaScript για να ξεκινήσετε. Δώστε λοιπόν σε αυτό το άρθρο 10 λεπτά και μπορείτε να προσθέσετε με ασφάλεια τη γραμμή "Ξέρω πώς να συνεργάζομαι με το localStorage" στο βιογραφικό σας.

  Τι είναι το localStorage;

  Έτσι μοιάζει ένα αντικείμενο JavaScript:

  Var myCar = ( τροχοί: 4, πόρτες: 4, κινητήρας: 1, όνομα: "Jaguar" )

  Και έτσι μοιάζει το JSON. Σχεδόν το ίδιο με ένα κανονικό αντικείμενο js, μόνο όλες οι ιδιότητες πρέπει να περικλείονται σε εισαγωγικά.

  ( "firstName": "Ivan", "lastName": "Ivanov", "address": ( "streetAddress": "Moskovskoye sh., 101, kv.101", "city": "Leningrad", "postalCode": 101101 ), "phoneNumbers": [ "812 123-1234", "916 123-4567" ] )

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

  Αν για να μιλήσω JavaScript, τότε το localStorage είναι μια ιδιότητα του καθολικού αντικειμένου του προγράμματος περιήγησης (παράθυρο). Μπορεί να προσπελαστεί ως window.localStorage ή απλώς ως localStorage.

  Αξίζει επίσης να αναφέρουμε ότι το πρόγραμμα περιήγησης διαθέτει έναν κλώνο του localStorage, ο οποίος ονομάζεται sessionStorage. Η μόνη διαφορά τους είναι ότι το τελευταίο αποθηκεύει δεδομένα μόνο για μία καρτέλα (συνεδρία) και απλώς θα καθαρίσει το χώρο του μόλις κλείσουμε την καρτέλα

  Ας τον δούμε ζωντανά. Για παράδειγμα, στο Google Chrome, πρέπει να ανοίξετε το DevTools (F12), να μεταβείτε στην καρτέλα "Πόροι" και στο αριστερό πλαίσιο θα δείτε το localStorage για αυτόν τον τομέα και όλες τις τιμές που περιέχει.

  Παρεμπιπτόντως, θα πρέπει να γνωρίζετε πώς λειτουργεί το localStorage με τους τομείς. Για κάθε τομέα, το πρόγραμμα περιήγησής σας δημιουργεί το δικό του αντικείμενο τοπικής αποθήκευσης και μπορεί να υποβληθεί σε επεξεργασία ή προβολή μόνο σε αυτόν τον τομέα. Για παράδειγμα, το mydomain-1.com δεν μπορεί να έχει πρόσβαση στην τοπική αποθήκευση του mydomain-2.com .

  Γιατί χρειάζομαι localStorage;

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

  Πώς μπορώ να ξεκινήσω με το localStorage;

  Πολύ απλό.

  Η εργασία με το localStorage μοιάζει πολύ με την εργασία με αντικείμενα σε JavaScript. Υπάρχουν διάφορες μέθοδοι για να δουλέψετε με αυτό.

  localStorage.setItem("κλειδί", "τιμή")

  Μέθοδος που προσθέτει στο localStorage νέο κλειδίμε μια τιμή (και αν υπάρχει ήδη ένα τέτοιο κλειδί, το αντικαθιστά με μια νέα τιμή). Γράφουμε, για παράδειγμα, localStorage.setItem('myKey', 'myValue');

  localStorage.getItem("κλειδί")

  Παίρνουμε μια συγκεκριμένη τιμή από την αποθήκευση με κλειδί.

  localStorage.removeItem("Κλειδί")

  Διαγράψτε το κλειδί

  localStorage.clear()

  Εκκαθάριση όλου του αποθηκευτικού χώρου

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

  //Προσθήκη ή αλλαγή της τιμής: localStorage.setItem("myKey", "myValue"); //τώρα έχετε το κλειδί "myKey" με την τιμή "myValue" αποθηκευμένο στο localStorage //Εκτυπώστε το στην κονσόλα: var localValue = localStorage.getItem("myKey"); console.log(localValue); //"myValue" //delete: localStorage.removeItem("myKey"); //clear all storage localStorage.clear() Ίδιο, αλλά με αγκύλες: localStorage["Key"] = "Value" //ρυθμίστε την τιμή του localStorage["Key"] //Λήψη της τιμής delete localStorage["Key" ] // Διαγραφή τιμής

  Θέλω επίσης να σημειώσω ότι το localStorage λειτουργεί εξαιρετικά με ένθετες δομές, όπως αντικείμενα.

  //δημιουργία αντικειμένου var obj = ( item1: 1, item2: , item3:"hello" ); var serialObj = JSON.stringify(obj); //serialize it localStorage.setItem("myKey", serialObj); //εγγράψτε το στον αποθηκευτικό χώρο με το κλειδί "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //αναλύστε το ξανά σε ένα αντικείμενο

  Θα πρέπει επίσης να γνωρίζετε ότι τα προγράμματα περιήγησης εκχωρούν 5 MB στο localStorage. Και αν το υπερβείτε, θα λάβετε μια εξαίρεση QUOTA_EXCEEDED_ERR. Παρεμπιπτόντως, με τη βοήθειά του μπορείτε να ελέγξετε αν υπάρχει ακόμα χώρος στον αποθηκευτικό χώρο σας.

  Δοκιμάστε ( localStorage.setItem("key", "value"); ) πιάστε το (e) ( if (e == QUOTA_EXCEEDED_ERR) ( ειδοποίηση("Υπέρβαση ορίου"); ) )

  Αντί για συμπέρασμα

  Θα ήθελα οι προγραμματιστές να βγάλουν ένα απλό συμπέρασμα από αυτό το σύντομο άρθρο για τον εαυτό τους ότι αυτή η τεχνολογίαήδη με δύναμη και κύρια μπορεί να χρησιμοποιηθεί στα έργα σας. Έχει καλή τυποποίηση και εξαιρετική υποστήριξη, η οποία αναπτύσσεται μόνο με την πάροδο του χρόνου.