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

您需要一种机制：

设计一种将数据保存到所有输入的会话存储的方法
触发将数据保存到会话存储（如按钮或输入更改）
在重新加载时迭代所有会话存储并找到您感兴趣的存储
使用该数据填充字段

以下是两个文本输入的示例：

$( 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

Answer 2

您可以在本地存储中保留每个if (strlen($string) > $limit && stristr($string, ' ') === false) { // Don't store the string }和input（以及其他（如果需要）其他值），节省卸载并在页面加载时重新加载。见简单示例：

select

此示例根据其id属性保存输入并选择为键值对。它是动态的，易于扩展。

See it running

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

2 个答案: