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

我一直试图永远保持用户在刷新页面时添加的输入字段的值，但没有成功。我想知道是否有人可以帮助我，直到网页重新加载时，我才得到输入字段。如果它有帮助，我使用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')); 
     } 
    } 
});

来源

2016-07-26 obi

您需要一种机制来：

想出一个办法，将数据保存到会话存储所有输入
触发数据保存到会话存储（如按钮或输入更改）
在重新加载时遍历所有会话存储并找到您感兴趣的内容
填充与数据

这里的领域是两个文本输入的示例：

$(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：在https://plnkr.co/edit/MrAUBAMALOmYRwxLqBs0?p=preview

来源

2016-07-26 03:31:20 User528491

那么select字段呢？ – obi

您可以修改代码以包含其他输入字段 – User528491

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

运行例如，你可以保持每input和select（和其他如果需要）本地存储中的值，s大小卸载并在页面加载时重新加载。见简单的例子：

$(document).ready(function() { 
    $(window).unload(saveSettings); 
    loadSettings(); 
}); 

function loadSettings() { 
    $('input, select').each(function(i,o) { 
     $(o).val(localStorage[$(o).attr('id')]) 
    }); 
} 

function saveSettings() { 
    $('input, select').each(function(i,o) { 
     localStorage[$(o).attr('id')] = $(o).val(); 
    }); 
}

该实施例节省的输入，并且选择基于它们的id属性的键 - 值对。它是动态的，易于扩展。

See it running

来源

2016-07-26 08:13:23 DDan

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

回答

相关问题