如何使用JQuery删除特定的sessionStorage值

时间:2016-08-04 13:42:06

标签: jquery html5 session-storage sessionstorage

我想知道是否可以删除特定的sessionStorage值,如果是这样我怎样才能使用JQuery实现这一点?到目前为止,我可以删除输入字段,但我似乎无法删除sessionStorage值。我的代码列在下面。

这是我的jsfiddle https://jsfiddle.net/fj324rzg/1/

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 = '<div><div class="delete-worker"><a title="" href="#">Delete</a></div><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></div>';

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

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

    $('.add-more').on('click', '.delete-worker', function(e){
        e.preventDefault();
        e.stopPropagation();    

        $(this).parent('div').remove(); x--;
    });
});

1 个答案:

答案 0 :(得分:2)

您在删除活动时不删除Worker中的记录。您只需删除dom content.Refer以下从Sessionstorage中删除工作记录

worker_record = JSON.parse(sessionStorage.worker);
    alert(worker_record);
    worker_record.splice(worker_record.length -1, 1);// Record index passed as 2nd paramter
    alert(worker_record);
    sessionStorage.worker = JSON.stringify(worker_record);