Lokale Speichern von Daten aus erstellt div

Question

JavaScript:

<script> 
var d = document; 
function add() { 
    var div = d.getElementById("div"), txt = d.getElementById("txt"), name = d.getElementById("name"); 
    var newDiv = d.createElement("div"); 
    newDiv.innerHTML = name.value + ('<br>') + txt.value; 
    div.appendChild(newDiv); 
    newDiv.id = 'comment'; 
document.getElementById("txt").value = ""; 
document.getElementById("name").value = ""; 
} 
</script> 

Und HTML:

<input type="text" id="name"/> 
<br> 
<textarea id="txt"></textarea> 

<input type="button" value="Add" onClick="add()"> 
<div id="div"></div> 

Dieser Code erstellt div mit id = "Kommentare" und post-Daten von der Eingabe und Textbereich in Mutter div mit id="div"

Und ich kann nicht erkennen, wie Benutzerdaten mit erstellten divs lokal auf Client-Seite gespeichert werden können, indem Sie lokalen Speicher oder Cookies verwenden.

Answer 1

Erstens: versuchen, doppelte IDs zu vermeiden, Klassen für mehrere Instanzen zu verwenden und z. ein Positionsschlüssel zu Ihrem Ich würde es einzigartig machen (z. B. class="comments"id="comment1"). Zum Speichern von Logik finden Sie viele Tutorials im Internet, wenn Sie nach "local storage Javascript" suchen. In Ihrem Beispiel können Sie ein Array im lokalen Speicher mit Ihren Daten speichern, z. window.localStorage.setItem("divs", [...]);

Oder wenn Sie nur wissen möchten, wie viele Artikel erstellt wurden, speichern Sie die Anzahl der Artikel.

Answer 2

Es ist eine gute Angewohnheit, Javascript vor dem schließenden Body-Tag ganz unten zu setzen. Dies gibt die dom Möglichkeit zu laden, bevor Javascript ausgeführt wird, wodurch beispielsweise der Preloader sehr einfach zu implementieren ist.

gute Ressource für die lokale Speicherung ist w3school

Beispiel von localstorage (von w3schools genommen)

// Store 
localStorage.setItem("lastname", "Smith"); 
// Retrieve 
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); 

lokale Speicher als String gespeichert ist. Dies bedeutet, dass Sie Objekte stringieren müssen. Sie können dies mit json.stringify tun.

var myobject = {"foo":"bar"}; 
var mystring = JSON.stringify(myobject) 

Gute Ressource für Cookies, wieder; w3school

Beispiel Cookie (aus w3schools)

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/"; 

Wenn Sie das Cookie löschen möchten, können Sie das Datum auf den Wert gesetzt, der bereits vergangen ist.