保留jquery附加的输入

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
<option>Select people</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<p>
<div id="names"></div>
</p>
</form>
<script>
$('select').on('change', function() {
$("#names").html('')
var count=$(this).val()

var str='';
for(var i=0; i<count; i++){
str+='<input type="text"><br/><br/>'
}

$("#names").append(str)

});

</script>

页面刷新后或从下一页返回时，附加的输入字段不会保留。我应该如何在刷新时创建输入字段和自动填充输入字段

Answer 1

正如我在评论中提到的，你可以这样做。

将值存储在持久存储中的某个位置，例如localStorage，即使在刷新时也可以获取它。

$('select').on('change', function() {
$("#names").html('')
var count=$(this).val()

var str='';
if (localStorage.getItem("str") !== null) {
str = localStorage.getItem("str");
}
for(var i=0; i<count; i++){
str+='<input type="text"><br/><br/>'
}

$("#names").append(str)

localStorage.setItem("str", str);
});