我一直在尝试在网页刷新时保留用户在添加的输入字段中输入的值,但没有成功。到目前为止,我想知道是否有人可以帮助我解决这个问题,我在重新加载网页时保留了输入字段。如果有帮助,我正在使用 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'));
}
}
});
最佳答案
您需要一种机制来:
- 设计一种将所有输入的数据保存到 session 存储的方法
- 触发将数据保存到 session 存储(如按钮或输入更改)
- 在重新加载时遍历所有 session 存储并找到您感兴趣的那些
- 用该数据填充字段
这是两个文本输入的示例:
$( 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>
关于javascript - 刷新页面时在输入字段中保留值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38579961/