Question

好的，所以我一直在研究这个代码，但我仍然无法正常工作。我的代码存在两个问题。

我尝试保存每个输入的值并选择字段，并在刷新页面时再次显示它们。
每次用户输入相同的输入字段时，都会创建一个新的key: value对。我只想要用户输入相同的输入字段，以便在用户更改其值时实时更新sessionStorage。

如果它有助于我使用JQuery和PHP。我的JQuery代码位于

JQuery的

$(document).ready(function(){
    var max_fields = 5;
    var x = 1;

    if(typeof(Storage) !== 'undefined'){
        $('.worker').on('click', function(e){
            e.preventDefault();
            e.stopPropagation();

            if(x < max_fields){
                x++;

                $(this).closest('li').find('div:eq(3)').append('<input type="text" name="first_name[]" class="first-name" /><input type="text" name="last_name[]" class="last-name" /><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>');

                sessionStorage.setItem('Data',$(this).closest('li').find('div:eq(3)').html());
            }
        });

        if(sessionStorage.getItem('Data')){
            $('.worker').closest('li').find('div:eq(3)').html(sessionStorage.getItem('Data')); 
        }
    }
}); 


var worker_record = [];
$(document).ready(function(){
    $('.worker').closest('li').find('div:eq(3)').on('input', function(){
        var fname = $('.first-name').val();
        var lname = $('.last-name').val();
        var wtitle = $('.title').val();
        var worker_data = {first_name: fname, last_name: lname, title: wtitle};
        worker_record.push(worker_data);
        for(var i=0; i<worker_record.length; i++){
            sessionStorage.newWorker = JSON.stringify(worker_record);
        }
    });
});

HTML

<ul>
    <li>
        <div class="worker-container">
            <label class="worker-label"><input type="text" name="first_name[]" class="first-name" /></label>
        </div>

        <div class="worker-container">
            <label class="worker-label"><input type="text" name="last_name[]" class="last-name" /></label>
        </div>

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

以下是我的jsfiddle https://jsfiddle.net/qjp6uscu/

Answer 1

问题＃2

您可以使用此类{/ 1}}方法获取现有的sessionStorage密钥，

getItem

如果它不存在则初始化一个空数组，否则解析它。

  var worker_record = sessionStorage.getItem('newWorker');

将您的worker_data推送到会话存储

  if (!worker_record ) { 
    worker_record = [];
  } else {
    worker_record = JSON.parse(worker_record);
  }

使用worker_record.push(worker_data);方法设置更新的键/值，

setItem

无法在sessionStorage中保存并显示键和值对

1 个答案: