Η δημιουργία μιας εφαρμογής είναι συνήθως η πρώτη εφαρμογή που μάθετε πώς να ενσωματώσετε το JavaScript, αλλά το πρόβλημα με όλες αυτές τις εφαρμογές είναι ότι όταν επαναφορτώσετε τη σελίδα, όλοι αυτοί οι χρήστες έχουν φύγει.
Υπάρχει όμως μια απλή λύση και αυτή είναι η χρήση της τοπικής αποθήκευσης. Το καλό για την τοπική αποθήκευση είναι ότι μπορείτε να αποθηκεύσετε εκείνα τα κομμάτια δεδομένων στον υπολογιστή του χρήστη έτσι ώστε όταν επαναφορτώσουν τη σελίδα όλοι οι todo τους θα εξακολουθούν να υπάρχουν και η τοπική αποθήκευση είναι στην πραγματικότητα αρκετά απλή όταν πρόκειται για την αποθήκευση των δεδομένων και την παραγωγή διατίθεται στη σελίδα.
Η τοπική αποθήκευση είναι μέρος του χώρου αποθήκευσης στο διαδίκτυο, το οποίο αποτελεί μέρος της προδιαγραφής HTML5. Υπάρχουν δύο επιλογές αποθήκευσης δεδομένων στις προδιαγραφές:
Με απλά λόγια, όλος ο αποθηκευτικός χώρος στον ιστό αυτό αποθηκεύει τοπικά τα ζεύγη κλειδιών / τιμών και αντίθετα από τα cookie αυτά τα δεδομένα παραμένουν ακόμη και αν κλείσετε το πρόγραμμα περιήγησής σας ή απενεργοποιήσετε τον υπολογιστή σας.
Αν σκεφτούμε μια λίστα με τις υποχρεώσεις μας, αυτό που θα χρειαστούμε είναι:
Έτσι, η HTML μας θα πρέπει να μοιάζει με κάτι τέτοιο:
Πρόκειται για ένα πολύ καλό πρότυπο HTML και με το javascript μπορούμε να το γεμίσουμε με δυναμικό περιεχόμενο.
Αφού θα χρησιμοποιήσουμε το jQuery σε αυτό το παράδειγμα, θα πρέπει να το συμπεριλάβετε και στο έγγραφο HTML.
Αν σκεφτούμε τη δομή μιας απλής εφαρμογής, το πρώτο πράγμα που πρέπει να κάνουμε είναι να ελέγξουμε πότε ο χρήστης κάνει κλικ στο κουμπί προσθήκης και ελέγχει αν η είσοδος έχει κενή τιμή, όπως π.χ.:
$('#add').click( function() {var Description = $('#description').val();//if the to-do is emptyif($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}Το μόνο που κάναμε ήταν να ελέγξουμε για ένα κλικ στο κουμπί προσθήκης και να εκτελέσουμε μια απλή δοκιμή για να ελέγξουμε αν ο χρήστης έφτιαξε την είσοδο με κάτι. Εάν όχι, το alert div σβήνει και παραμένει για 1000ms και στη συνέχεια εξασθενίζει. Τέλος επιστρέφουμε ψευδείς, έτσι ώστε το πρόγραμμα περιήγησης να μην διαβάσει το υπόλοιπο script και να προσθέσει ακόμα το στοιχείο της λίστας.
Το επόμενο πράγμα που πρέπει να κάνουμε είναι να εισαγάγουμε ένα στοιχείο λίστας με την τιμή στην είσοδο και θα το προεξοφλήσουμε έτσι ώστε όταν ο χρήστης προσθέτει ένα to-do θα πηγαίνει πάντοτε στην αρχή της λίστας και στη συνέχεια αποθηκεύει αυτό το στοιχείο λίστας τοπική αποθήκευση, όπως συμβαίνει:
// add the list item$('#todos').prepend("" + Description + " ");// delete whatever is in the input$('#form')[0].reset();var todos = $('#todos').html();localStorage.setItem('todos', todos);return false;});Όπως μπορείτε να δείτε ότι είναι αρκετά πρότυπο jQuery και όταν πρόκειται για τοπική αποθήκευση πρέπει να αποθηκεύσετε ένα κλειδί και μια αξία. Το κλειδί είναι ένα όνομα που ορίσαμε για τους εαυτούς μας και σε αυτή την περίπτωση το αποκαλούσα «todos» και έπειτα πρέπει να καθορίσουμε τι πραγματικά θέλουμε να αποθηκεύσουμε και σε αυτή την περίπτωση αυτό είναι όλο το HTML που τοποθετείται μέσα στην άτυπη λίστα todos . Όπως βλέπετε, απλώς άρπαξα ότι χρησιμοποιώντας jQuery και επιστρέψαμε τελικά ψευδείς, έτσι ώστε η φόρμα να μην υποβληθεί και η σελίδα μας δεν φορτώνεται ξανά.
Το επόμενο βήμα είναι να ελέγξουμε αν διαθέτουμε κάτι στο τοπικό αποθηκευτικό χώρο ήδη αποθηκευμένο στη μηχανή μας και αν το κάνουμε πρέπει να το τοποθετήσουμε στη σελίδα, οπότε από τότε που δώσαμε στο κλειδί μας το όνομα todos πρέπει να ελέγξουμε για την ύπαρξή του ως εξής:
// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}Χρησιμοποιήσαμε μια απλή εντολή if για να ελέγξουμε και έπειτα πήραμε απλώς αυτό που διαθέτουμε στην τοπική αποθήκευση και το τοποθετήσαμε ως HTML της μη τακτοποιημένης λίστας των υποχρεώσεων.
Αν δοκιμάσετε την απλή εφαρμογή μας και επαναφορτώσουμε τη σελίδα βλέπουμε ότι λειτουργεί ήδη και το μόνο που έχουμε αφήσει είναι να δημιουργηθεί η λειτουργία για το πότε ο χρήστης επιλέγει να εκκαθαρίσει όλα τα to-do's? όταν συμβαίνει αυτό, θα καθαρίσουμε όλη την τοπική αποθήκευση, θα φορτώσουμε ξανά τη σελίδα για τις αλλαγές μας και θα επιστρέψουμε τα false για να αποτρέψουμε το hash μπροστά από τη διεύθυνση url όπως έτσι:
// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});Με αυτόν τον τρόπο έχουμε την εφαρμογή μας να λειτουργεί πλήρως. Ο πλήρης κώδικας μοιάζει με αυτό:
$('#add').click( function() {var Description = $('#description').val();if($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;} $ ('# todos') prepend (" "+ Περιγραφή +" "); $ ('# form') [0] .reset (); var todos = $ ('# todos'). html (); αν (localStorage.getItem ('todos')) {$('#todos').html(localStorage.getItem('todos'));} $ ('# clear') κάντε κλικ (λειτουργία () {window.localStorage.clear (); location.reload (); return false;}); Η υποστήριξη για την αποθήκευση στο διαδίκτυο είναι αρκετά καλή για μια προδιαγραφή HTML5. υποστηρίζεται από όλα τα μεγάλα προγράμματα περιήγησης και ακόμη και από το IE8, οπότε το μόνο που ίσως χρειαστεί να είστε προσεκτικοί είναι το IE7, αν το υποστηρίζετε ακόμα.
Η τοπική αποθήκευση σε μικρές εφαρμογές όπως αυτή μπορεί να καλωσορίσει πολύ υποκατάστατα για βάσεις δεδομένων. Η αποθήκευση μικρών ποσοτήτων δεδομένων δεν χρειάζεται να είναι πολύπλοκη.
Πώς αποθηκεύετε δεδομένα από τη JavaScript; Προτιμάτε τα cookies ή τις βάσεις δεδομένων στην τοπική αποθήκευση; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα αποθήκευσης μέσω Shutterstock.