javascript - 刷新页面时在输入字段中保留值

Question

我一直在尝试在网页刷新时保留用户在添加的输入字段中输入的值，但没有成功。到目前为止，我想知道是否有人可以帮助我解决这个问题，我在重新加载网页时保留了输入字段。如果有帮助，我正在使用 JQuery 和 PHP。我的 JQuery 代码位于下方。

JQuery

$(document).ready(function(){
    var max_fields = 10;
    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[]" /><input type="text" name="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')); 
        }
    }
});

Answer 1

您需要一种机制来:

1. 设计一种将所有输入的数据保存到 session 存储的方法
2. 触发将数据保存到 session 存储(如按钮或输入更改)
3. 在重新加载时遍历所有 session 存储并找到您感兴趣的那些
4. 用该数据填充字段

这是两个文本输入的示例:

$( document ).ready(function() {
  if(typeof(Storage) !== 'undefined'){
    populateInputs();
  }

  function populateInputs(){
      for(var i=0; i<sessionStorage.length; i++) {
        var temp = sessionStorage.key(i);
        if(temp.startsWith('inputData')) {
            console.log('Setting ' + temp.split('-')[1] +
          ' to ' + sessionStorage.getItem(temp));
            $('#'+temp.split('-')[1]).val(sessionStorage.getItem(temp));
        }
      }
  }

  $('.saveInput').on('input', function(){
      sessionStorage.setItem('inputData-'+this.id, this.value);
  });
});

HTML:

<label>First Name :</label><input type="text" class="saveInput" id="firstname"></input> <br>
<label>Last Name  :</label><input type="text" class="saveInput" id="lastname"></input>

在 https://plnkr.co/edit/MrAUBAMALOmYRwxLqBs0?p=preview 运行示例