Wie man sessionStorage davon abhält die Werte zu speichern, nachdem ein Limit erreicht ist

Question

Ich habe versucht herauszufinden, wie ich die sessionStorage davon abhalten kann, die Werte zu speichern, nachdem die max_fields erreicht ist, wenn die Add Another Worker Schaltfläche angeklickt wird? Es scheint, nachdem das Limit erreicht ist und der Button erneut angeklickt wird, werden die Werte immer wieder zum SessionStorage hinzugefügt. Ich habe mich gefragt, wie ich das verhindern kann. Hier

ist ein Link zu meinem jsfiddle https://jsfiddle.net/p2euLqbf/4/

HTML

<ul> 
    <li> 
     <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" title="" href="">Add Another Worker</a></div> 
    </li> 
</ul> 

JQuery

var worker_record = []; 
$(document).ready(function(){ 
    workerData(); 
    $('.worker').on('click', function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 

     var title = $('.title:first').val();    

     var someData = {title: title}; 
     worker_record.push(someData); 

     sessionStorage.worker = JSON.stringify(worker_record); 
     workerData(); 
    }); 

    function workerData(){ 
     var max_fields = 6; 
     var x = 1; 

     if(!(typeof sessionStorage.worker === 'undefined' || sessionStorage.worker.length<1)){ 
      worker_record = JSON.parse(sessionStorage.worker); 
     } 

     $('.add-more').empty(); 
     for(var i=0; i<worker_record.length; i++){ 
      if(x < max_fields){ 
       x++; 
       var title = worker_record[i].title; 

       var worker = '<select name="title[]" class="title title-options"><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>'; 

       $('.add-more').append(worker); 
       $('.title:eq('+$('.title-options').length+')').val(title); 
      } 
     } 

     $('.title:first').val('Select a Title'); 
    } 
}); 

Answer 1

Um eine Grenze zu setzen, dies zu tun.

eine Variable erste

if (sessionStorage.getItem("limit") === null) { 
    sessionStorage.setItem('limit', 0); 
} 

Erhöhungsschritte der diese Variable Wert bei jeder Iteration und stellen Sie einen Scheck von Grenze entsprechend Sie dann eine limit = 10 einstellen Angenommen wollen,

if(sessionStorage.getItem('limit') <= 10) 
{ 
var count = sessionStorage.getItem('limit'); 
    count++; 

sessionStorage.setItem('limit', count); 

    //do whatever 

} 
else{ 

    alert("session limit reached!"); 
    return false; 

} 

Working Demo