Javascript 在会话存储中保存和显示键对和值对时出现问题

好吧，我一直在写这段代码，但我仍然无法让它正常工作。我的代码有两个问题

我试图保存每个输入和选择字段的值，并在刷新页面时再次显示它们

每次用户在同一输入字段中键入内容时，都会创建一个新的

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

$（文档）.ready（函数（）{
var max_字段=5；
var x=1；
if（类型（存储）！=‘未定义’）{
$（'.worker'）。在（'click'，函数（e）上{
e、 预防默认值（）；
e、 停止传播（）；
如果（x对于问题#2

您可以使用下面的
getItem
方法获取现有会话存储密钥

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

  sessionStorage.setItem('newWorker', JSON.stringify(worker_record));

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

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

将worker_数据推入会话存储

  worker_record.push(worker_data); 

使用
setItem
方法如下设置更新的键/值

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

  sessionStorage.setItem('newWorker', JSON.stringify(worker_record));

第二期

您可以使用下面的
getItem
方法获取现有会话存储密钥

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

  sessionStorage.setItem('newWorker', JSON.stringify(worker_record));

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

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

将worker_数据推入会话存储

  worker_record.push(worker_data); 

使用
setItem
方法如下设置更新的键/值

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

  sessionStorage.setItem('newWorker', JSON.stringify(worker_record));

我应该在哪里替换和放置新代码？感谢您的帮助。您可以在
（文档）.ready（function（）{…}）中找到它
在您已经编写了逻辑的地方阻塞。您能在chrome中打开您的DevTools吗？您能检查您的变量/值是否出现在
资源下吗？
=>
会话存储下吗？它们根本不会出现？将您的代码恢复到旧状态，重新运行并重复上述步骤，然后检查。当我是否确实要替换并放置新代码？谢谢您的帮助。您可以在
（文档）.ready（function（）{…}）中找到它
在您已经编写了逻辑的地方阻塞。您可以在chrome中打开您的DevTools吗？您可以检查您的变量/值是否出现在
资源下
=>
会话存储下吗？它们根本不出现将您的代码恢复到旧状态，重新运行并重复上述步骤，然后检查。