Das Erstellen einer Aufgabenanwendung ist normalerweise die erste Anwendung, in der Sie lernen, JavaScript zu erstellen, aber das Problem mit all diesen Anwendungen besteht darin, dass beim Nachladen der Seite all diese Aufgaben weg sind.
Es gibt jedoch eine einfache Lösung, nämlich lokalen Speicher zu verwenden. Das Gute am lokalen Speicher ist, dass Sie diese Daten auf dem Computer des Benutzers speichern können, so dass beim Laden der Seite alle ihre Aufgaben immer noch da sind und der lokale Speicher tatsächlich ziemlich einfach ist, wenn es darum geht, die Daten zu speichern und zu speichern es ist auf der Seite verfügbar.
Lokaler Speicher ist ein Teil des Webspeichers, der selbst Teil der HTML5-Spezifikation ist. Es gibt zwei Möglichkeiten, Daten in der Spezifikation zu speichern:
In einfachen Worten speichert der gesamte Webspeicher nur lokal benannte Schlüssel / Wert-Paare und im Gegensatz zu Cookies bleiben diese Daten auch dann erhalten, wenn Sie Ihren Browser schließen oder den Computer ausschalten.
Wenn wir über eine To-Do-Liste nachdenken, was wir brauchen, ist:
Unser HTML sollte also ungefähr so aussehen:
Es ist ein hübscher Standard Platzhalter HTML und mit unserem Javascript können wir all das mit dynamischen Inhalten füllen.
Da wir in diesem Beispiel jQuery verwenden, sollten Sie es auch in Ihr HTML-Dokument einfügen.
Wenn wir über die Struktur einer einfachen Aufgabenanwendung nachdenken, müssen wir zunächst prüfen, wann der Benutzer auf die Schaltfläche "Hinzufügen" klickt, und prüfen, ob die Eingabe einen leeren Wert enthält:
$('#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;}Wir haben nur nach einem Klick auf den Hinzufügen-Button gesucht und einen einfachen Test ausgeführt, um zu überprüfen, ob der Benutzer die Eingabe mit etwas gefüllt hat. Ist dies nicht der Fall, blendet der Alert-DIV ein und bleibt für 1000ms stehen und wird dann ausgeblendet. Schließlich geben wir false zurück, damit der Browser den Rest des Skripts nicht liest und das Listenelement trotzdem hinzufügt.
Das nächste, was wir tun müssen, ist ein Listenelement mit dem Wert in die Eingabe einzufügen, und wir werden dies so voranstellen, dass der Benutzer, wenn er eine Aufgabe hinzufügt, immer an den Anfang der Liste geht und dann das Listenelement speichert lokaler Speicher, so:
// 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;});Wie Sie sehen können, ist es ziemlich Standard-jQuery und wenn es um lokalen Speicher geht, müssen wir einen Schlüssel und einen Wert speichern. Der Schlüssel ist ein Name, den wir uns selbst gesetzt haben, und in diesem Fall habe ich ihn nur 'todos' genannt und dann müssen wir angeben, was wir eigentlich speichern wollen, und in diesem Fall ist das alles HTML, das in die ungeordnete Liste von todos eingefügt wird . Wie Sie sehen können, haben wir gerade mit jQuery gegriffen, und wir haben schließlich false zurückgegeben, so dass das Formular nicht übermittelt wird und unsere Seite nicht neu geladen wird.
Unser nächster Schritt ist zu überprüfen, ob wir etwas auf dem lokalen Speicher haben, das bereits in unserer Maschine gespeichert ist und wenn wir es auf der Seite platzieren müssen, da wir unserem Schlüssel den Namen todos gegeben haben, müssen wir auf seine Existenz wie folgt prüfen:
// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}Wir haben eine einfache if-Anweisung verwendet, um zu prüfen, und dann haben wir nur das, was wir auf dem lokalen Speicher haben, und legen das als HTML der ungeordneten Liste der Aufgabe.
Wenn Sie unsere einfache App testen und die Seite neu laden, sehen wir, dass sie bereits funktioniert und wir nur noch die Funktion erstellen können, wenn der Benutzer alle Aufgaben löscht. Wenn dies passiert, löschen wir den gesamten lokalen Speicher, laden die Seite neu, damit unsere Änderungen wirksam werden, und geben dann false zurück, um den Hash vor der URL wie folgt zu verhindern:
// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});Damit haben wir unsere App voll funktionsfähig. Der vollständige Code sieht folgendermaßen aus:
$('#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') vorgeben (" "+ Beschreibung +" "); $ ('# form') [0] .reset (); var todos = $ ('# Todos'). html (); localStorage.setItem ('Todos', Todos); Rückgabe false;}); if (localStorage.getItem ('Todos')) {$('#todos').html(localStorage.getItem('todos'));} $ ('# clear'). click (function () {window.localStorage.clear (); location.reload (); gibt false zurück;}); Die Unterstützung für Webspeicher ist ziemlich gut für eine HTML5-Spezifikation; Es wird von allen gängigen Browsern und sogar IE8 unterstützt, so dass das einzige, was Sie möglicherweise vorsichtig sein müssen, IE7 ist, wenn Sie das immer noch unterstützen.
Lokaler Speicher in kleinen Apps wie diesem kann einen Ersatz für Datenbanken sehr begrüßen. Das Speichern kleiner Datenmengen muss nicht komplex sein.
Wie speichern Sie Daten aus JavaScript? Bevorzugen Sie Cookies oder Datenbanken für lokalen Speicher? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Speicherabbild über Shutterstock.