如何在达到限制后停止sessionStorage保存值

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.

我一直试图弄清楚如何在单击Add Another Worker按钮时达到max_fields之后停止sessionStorage保存值？似乎在达到限制并再次单击按钮后，值继续添加到sessionStorage我想知道如何阻止这种情况发生。

Here is a link to my jsfiddle https://jsfiddle.net/p2euLqbf/4/

这是我的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

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');
    }
});

1 个解决方案

#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,

在每次迭代时递增此变量值并相应地设置限制检查假设您要设置limit = 10，

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

工作演示

#1