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

Question

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

3

我一直在尝试让用户在网页刷新后保留输入的值，但一直没有成功。我想知道是否有人能帮助我解决这个问题，目前我已经成功实现了在网页重新加载时输入框的保留。如果有帮助的话，我正在使用 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')); 
        }
    }
});

- obi

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Slartibartfast · 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上运行示例

- DDan · Answer 2

你可以将每个和