local mit HTML auf Aktualisierung der Seite zu halten, funktioniert nicht

Question

ich diese Geige zu integrieren bin versucht: http://jsfiddle.net/jaredwilli/ReT8n/ in einer Geige ich tue:

https://jsfiddle.net/vlrprbttst/99c8gn7k/

Grundsätzlich haben Sie einen Korb mit einigen Elementen innerhalb von Sie können sie hinzufügen oder entfernen. Was ich will ist, dass bei der Seitenaktualisierung die html() der .basket im lokalen Speicher gehalten wird. Ich bin hier fest:

https://jsfiddle.net/vlrprbttst/z8cffk4c/

ich die forLocalStorage Variable in den Click-Handler gesetzt haben, denn sonst würde die var nicht selbst aktualisieren, aber jetzt ist ich vermute, dass der letzten lokalen Speichercode

if(localStorage.getItem('toDoData')) { 
    forLocalStorage = localStorage.getItem('toDoData'); 
} 

funktioniert nicht, weil es die Variable nicht abrufen kann?

Ich habe versucht, Dinge zu bewegen, aber ich stecke hier fest. Was mache ich falsch?

Answer 1

Sie müssen DOM aktualisieren, sobald Ihre Variablen gesetzt sind, z:

// LOCAL STORAGEEEEEEEE 
    if (localStorage.getItem('toDoData')) { 
    forLocalStorage = localStorage.getItem('toDoData'); 
    $('#cart').html(forLocalStorage); 
    itemsCount(); 
    } 

Answer 2

Lokaler Speicher kann nur string key value pairs speichern. Ich habe sichergestellt, dass Sie eine Zeichenfolge übergeben und auch eine Funktion hinzugefügt, um den Warenkorb bei der Aktualisierung zu füllen, die Probleme behoben.

function populateCart() { 
    var items = localStorage.getItem('toDoData') || ''; 
    $('#cart').html(items); 
} 

hinzugefügt dieser Anruf innerhalb document.ready, etwa so: -

$(document).ready(function() { 
    populateCart(); 
    // rest of code 
}); 

Arbeits CodePen: http://codepen.io/owenayres/pen/oxKmZg

Sie können einige leichte Lektüre here auf dem lokalen Speicher tun. Es ist meiner Meinung nach die beste Vorgehensweise, die Daten für den HTML-Code als JSON im lokalen Speicher zu speichern, den Sie dann durchforsten und den HTML-Code für das erneute Lesen dieser Daten neu generieren würden.