How to stop sessionStorage from saving the values after a limit is reached

Question

I've been trying to figure out how can I stop the sessionStorage from saving the values after the max_fields is reached when the Add Another Worker button is clicked? It seems after the limit is reached and the button is clicked again the values keep getting added to the sessionStorage I was wondering how can I stop this from happening.

Here is a link to my 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

To set a limit you can do this .

set a variable first

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

Increment the this variable value on every iteration and set a check of limit accordingly Suppose you want to set a limit = 10 then,

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