Wie zusätzliche Felder von js auf Refresh hinzugefügt werden

Question

var container = document.createElement("lastExp"); 
    container.innerHTML = 'html code new form field'; 
    document.getElementById("lastExp").appendChild(container); 

Es ist einfach, ich klicke Schaltfläche zusätzliche Formularfeld hinzugefügt wird. Frage: Wenn ich Seite aktualisiere, wie diese zusätzlichen Felder auf meinem Formular nicht verlieren.

Answer 1

Stack Overflow ist nicht der Ort, um Code zu schreiben, aber dies wird hier sitzen, falls jemand außer OP brauchen.

Es ist ein minimales Beispiel - erste Schritte - mit localStorage. Wie ich bereits erwähnt habe, müssen Sie dieses Element jedes Mal anhängen, wenn die Seite geladen wird.

Das Snippet wird hier nicht funktionieren, leider, weil der iframe sandbox'd ist. Gehen Sie zu my hub, um es zu experimentieren.

var container = document.getElementById('container'), 
 
    toggle = document.getElementById('toggle'); 
 
    element = null; 
 

 
// initial check 
 
init(); 
 

 
// add click event and listen for clicks 
 
toggle.onclick = function() { 
 
    // both cases will update localStoage _inputIsThere 
 
    // if element is null -- doesn't exists, then add it 
 
    if (element == null) { 
 
    add(); 
 
    } else { 
 
    // remove the element 
 
    remove(); 
 
    } 
 
} 
 

 
// check if key exists in localStorage; this is where all the "magic" happens. 
 
function init() { 
 
    var exists = localStorage.getItem('_inputIsThere'); 
 
    if (exists && exists == 'true') { 
 
    add(); 
 
    } 
 
} 
 

 

 
function remove() { 
 
    element.remove(); 
 
    element = null; 
 
    // update key in localStorage to false 
 
    localStorage.setItem('_inputIsThere', false); 
 
} 
 

 
// adds the input and updates 
 
function add() { 
 

 
    var e = document.createElement('input'); 
 
    e.type = 'text'; 
 
    element = e; 
 
    container.appendChild(e); 
 
    // update key in localStorage to true 
 
    localStorage.setItem('_inputIsThere', true); 
 

 
}

<button id="toggle">Add/Remove</button> 
 
<div id="container"></div>