Werte in Eingabefeldern beibehalten, wenn die Seite aktualisiert wird

Question

Ich habe immer versucht, die Werte, die der Benutzer eingegeben hat, in den hinzugefügten Eingabefeldern zu belassen, wenn die Webseite aktualisiert wird, aber ohne Erfolg. Ich habe mich gefragt, ob mir irgendjemand dabei helfen kann. Bisher habe ich die Eingabefelder erhalten, die bleiben sollen, wenn die Webseite neu geladen wird. Wenn es hilft, benutze ich JQuery und PHP. Mein JQuery-Code befindet sich darunter.

JQuery

$(document).ready(function(){ 
    var max_fields = 10; 
    var x = 1; 

    if(typeof(Storage) !== 'undefined'){ 
     $('.worker').on('click', function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 

      if(x < max_fields){ 
       x++; 

       $(this).closest('li').find('div:eq(3)').append('<input type="text" name="first_name[]" /><input type="text" name="last_name[]" /><select name="title[]" class="title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select>'); 

       sessionStorage.setItem('Data',$(this).closest('li').find('div:eq(3)').html()); 
      } 
     }); 

     if(sessionStorage.getItem('Data')){ 
      $('.worker').closest('li').find('div:eq(3)').html(sessionStorage.getItem('Data')); 
     } 
    } 
}); 

Answer 1

Sie benötigen einen Mechanismus:

1. einen Weg entwickeln, um Daten zu Sitzungsspeicher für alle Eingänge zu speichern
2. Trigger-Daten zu Sitzungsspeicher speichern (wie eine Taste oder Eingabeänderung)
3. Iterate durch alle Sitzungsspeicher beim Neuladen und finde die, an denen du interessiert bist
4. Füllen Sie die Felder mit diesen Daten

Hier ist ein Beispiel für zwei Texteingaben:

$(document).ready(function() { 
    if(typeof(Storage) !== 'undefined'){ 
    populateInputs(); 
    } 

    function populateInputs(){ 
     for(var i=0; i<sessionStorage.length; i++) { 
     var temp = sessionStorage.key(i); 
     if(temp.startsWith('inputData')) { 
      console.log('Setting ' + temp.split('-')[1] + 
      ' to ' + sessionStorage.getItem(temp)); 
      $('#'+temp.split('-')[1]).val(sessionStorage.getItem(temp)); 
     } 
     } 
    } 

    $('.saveInput').on('input', function(){ 
     sessionStorage.setItem('inputData-'+this.id, this.value); 
    }); 
}); 

Die HTML:

<label>First Name :</label><input type="text" class="saveInput" id="firstname"></input> <br> 
<label>Last Name :</label><input type="text" class="saveInput" id="lastname"></input> 

Lauf Beispiel bei https://plnkr.co/edit/MrAUBAMALOmYRwxLqBs0?p=preview

Answer 2

Sie all halten konnten input und select (und andere, falls erforderlich) Wert im lokalen Speicher, s ave beim Entladen und beim Laden der Seite neu laden. Siehe einfaches Beispiel:

$(document).ready(function() { 
    $(window).unload(saveSettings); 
    loadSettings(); 
}); 

function loadSettings() { 
    $('input, select').each(function(i,o) { 
     $(o).val(localStorage[$(o).attr('id')]) 
    }); 
} 

function saveSettings() { 
    $('input, select').each(function(i,o) { 
     localStorage[$(o).attr('id')] = $(o).val(); 
    }); 
} 

Dieses Beispiel speichert Eingänge und wählt als Schlüssel-Wert-Paare auf der Grundlage ihres id-Attribut. Es ist dynamisch und leicht erweiterbar.

See it running