Probleme beim Speichern und Anzeigen der Schlüssel- und Wertepaare in sessionStorage

Question

Okay, ich habe für immer an diesem Code gearbeitet und kann immer noch nicht richtig arbeiten. Ich habe zwei Probleme mit meinem Code.

1. Ich versuche, die Werte für jede Eingabe zu speichern und Feld auszuwählen und sie wieder anzuzeigen, wenn die Seite aktualisiert wird.

2. Jedes Mal, wenn ein Benutzer in dasselbe Eingabefeld eingibt, wird ein neues key: value Paar erstellt. Ich möchte nur das gleiche Eingabefeld, in das der Benutzer schreibt, um das sessionStorage in Echtzeit zu aktualisieren, wenn der Benutzer seinen Wert ändert.

Wenn es hilft, verwende ich JQuery und PHP. Mein JQuery-Code unten

JQuery befindet sich

$(document).ready(function(){ 
    var max_fields = 5; 
    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[]" class="first-name" /><input type="text" name="last_name[]" class="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')); 
     } 
    } 
}); 


var worker_record = []; 
$(document).ready(function(){ 
    $('.worker').closest('li').find('div:eq(3)').on('input', function(){ 
     var fname = $('.first-name').val(); 
     var lname = $('.last-name').val(); 
     var wtitle = $('.title').val(); 
     var worker_data = {first_name: fname, last_name: lname, title: wtitle}; 
     worker_record.push(worker_data); 
     for(var i=0; i<worker_record.length; i++){ 
      sessionStorage.newWorker = JSON.stringify(worker_record); 
     } 
    }); 
}); 

HTML

<ul> 
    <li> 
     <div class="worker-container"> 
      <label class="worker-label"><input type="text" name="first_name[]" class="first-name" /></label> 
     </div> 

     <div class="worker-container"> 
      <label class="worker-label"><input type="text" name="last_name[]" class="last-name" /></label> 
     </div> 

     <div class="worker-container-last"> 
      <label class="worker-label"> 
       <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> 
      </label> 
     </div> 
     <div class="add-more"></div> 
     <div><a class="worker" href="">Add Another Worker</a></div> 
    </li> 
</ul> 

Hier ist ein Link zu meinem jsfiddle https://jsfiddle.net/qjp6uscu/

Answer 1

Für Issue # 2

Sie können die vorhandene sessionSchlüssel mit der getItem Methode wie diese erhalten,

var worker_record = sessionStorage.getItem('newWorker'); 

Wenn es ein leeres Array nicht existiert initialisieren, sonst es analysiert.

if (!worker_record) { 
    worker_record = []; 
    } else { 
    worker_record = JSON.parse(worker_record); 
    } 

Ihre worker_data in Sitzungsspeicher schieben,

worker_record.push(worker_data); 

die setItem Methode, um den aktualisierten Schlüssel/Wert wie folgt zu setzen,

sessionStorage.setItem('newWorker', JSON.stringify(worker_record));