更新 sessionStorage 输入和 select 字段

Question

当用户尝试更新他们已经输入的名字、姓氏或头衔选项或以上所有选项时。刷新页面时更新的字段不显示，谁能帮我解决这个问题？

这是我的 Jsfiddle https://jsfiddle.net/6kqbhd0z/

下面是代码。

Jquery 我认为是我遇到的问题。

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

    var first_name = $(this).parent().parent().find('.first-name').val();
    var last_name = $(this).parent().parent().find('.last-name').val();
    var title = $(this).parent().parent().find('.helper-title').val();

    var key_values = {first_name: first_name, last_name: last_name, title: title};
    sessionStorage.helper = JSON.stringify(key_values); 
});

Jquery完整代码

var helper_record = [];
$(document).ready(function(){
    if(typeof(Storage) !== 'undefined'){
        new_helper();
        $('.add-another').on('click', function(e){
            e.preventDefault();
            e.stopPropagation();

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

            if(sessionStorage.getItem('limit') <= 19){
                var first_name = $('.first-name').val();
                var last_name = $('.last-name').val();
                var title = $('.title:first').val();            

                var key_values = {first_name: first_name, last_name: last_name, title: title};
                helper_record.push(key_values);

                sessionStorage.helper = JSON.stringify(helper_record);
                new_helper();

                var count = sessionStorage.getItem('limit');
                count++;
                sessionStorage.setItem('limit', count);  
            }
        });
    } else {
        var max_fields = 20;
        var x = 0;
        var index = 0;

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

            if(x < max_fields){
                x++;
                index++;
                var first_name = $('.first-name').val();
                var last_name = $('.last-name').val();
                var title = $('.title').val();

                var helper = '<div class="helper-container"><div class="helper-options" data-index="' + index + '"><a title="" href="#" class="delete-helper">Delete</a><a title="" href="#" class="update-helper">Update</a></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_first_name[]" class="first-name" value="' + first_name + '" /></label></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_last_name[]" class="last-name" value="' + last_name + '" /></label></div><div class="helper-box-last"><label class="another-helper"><select name="helpers_title[]" class="title helpers-title-options"><option value="Select a Title" selected="selected">Select a Title</option><option value="Manager">Manager</option><option value="Planner">Planner</option><option value="Advisor">Advisor</option><option value="Staff">Staff</option><option value="Laborer">Laborer</option></select></label></div></div>';

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

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

    function new_helper(){
        var max_fields = 20;
        var x = 0;
        var index = 0;

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

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

                var helper = '<div class="helper-container"><div class="helper-options" data-index="' + index + '"><a title="" href="#" class="delete-helper">Delete</a><a title="" href="#" class="update-helper">Update</a></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_first_name[]" class="first-name" value="' + first_name + '" /></label></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_last_name[]" class="last-name" value="' + last_name + '" /></label></div><div class="helper-box-last"><label class="another-helper"><select name="helpers_title[]" class="title helpers-title-options"><option value="Select a Title" selected="selected">Select a Title</option><option value="Manager">Manager</option><option value="Planner">Planner</option><option value="Advisor">Advisor</option><option value="Staff">Staff</option><option value="Laborer">Laborer</option></select></label></div></div>';

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

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

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

        var index = $(this).parent().attr('data-index');
        $(this).parent().parent().remove();

        if(typeof(Storage) !== 'undefined'){
            var helper_limit = JSON.parse(sessionStorage.limit) -1;
            if(helper_limit >= 0){
                sessionStorage.setItem('limit', helper_limit);
            }

            if(helper_limit == 1){
                helper_record.splice(1, 0);
                sessionStorage.helper = JSON.stringify(helper_record);                  
            }

            helper_record.splice(index -1, 1);
            sessionStorage.helper = JSON.stringify(helper_record);
        } else {
            x--;
        }
    });

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

        var first_name = $(this).parent().parent().find('.first-name').val();
        var last_name = $(this).parent().parent().find('.last-name').val();
        var title = $(this).parent().parent().find('.helper-title').val();

        var key_values = {first_name: first_name, last_name: last_name, title: title};
        sessionStorage.helper = JSON.stringify(key_values); 
    });
});

HTML

<div id="form-container">
    <form method="post" action="" id="form" enctype="multipart/form-data">
        <fieldset>
            <ol>
                <li>    
                    <div id="helper-headings">
                        <div class="helper-box">
                            <span>First Name:</span>
                        </div>
                        <div class="helper-box">
                            <span>Last Name:</span>
                        </div>
                        <div class="helper-box-last">
                            <span>Title:</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="helper-box">
                        <label class="helper"><input type="text" class="first-name" /></label>
                    </div>
                    <div class="helper-box">
                        <label class="helper"><input type="text" class="last-name" /></label>
                    </div>

                    <div class="helper-box-last">
                        <label class="helper"><select class="title">
                            <option value="Select a Title" selected="selected">Select a Title</option>
                            <option value="Manager">Manager</option>
                            <option value="Planner">Planner</option>
                            <option value="Advisor">Advisor</option>
                            <option value="Staff">Staff</option>
                            <option value="Laborer">Laborer</option>
                        </select></label>
                    </div>
                    <div class="question"><a class="add-another" title="" href="">Add Helper</a></div><div class="add-more"></div></li>
            </ol>
        </fieldset>
    </form>
</div>

Answer 1

当用户点击"update"时，我认为您的代码可能存在以下问题：

所选项目的标题内容为空
更新操作会将 sessionStorage.helper 从数组更改为 object。

修改后的代码如下：

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

    var first_name = $(this).parent().parent().find('.first-name').val();
    var last_name = $(this).parent().parent().find('.last-name').val();
    var title = $(this).parent().parent().find('.helpers-title-options').val();

    var index = $(this).parent().parent().prevAll().length;
    var key_values = {first_name: first_name, last_name: last_name, title: title};
    var help = JSON.parse(sessionStorage.helper);
    help[index] = key_values;
    sessionStorage.helper = JSON.stringify(help);
});

https://jsfiddle.net/sept08/8e446cL8/

更新 sessionStorage 输入和 select 字段

Updating a sessionStorage input and select fields

javascript

jquery

session-storage

local-storage