jquery - 如何让jqueryappend中的input元素在页面重新加载或刷新时出现

Question

我尝试制作一个输入表单，单击“添加”按钮后将出现输入元素。但有时输入时经常忘记按刷新按钮，所有输入都丢失了，必须从头开始，重新加载或刷新输入元素如何才能不丢失？

<button type="button" onclick="itemAdd()" >Add</button>
<div id="entry"></div>

<script>
var line= 1;
function itemAdd()
{
    var parts = '<input type="text" name="description"><input type="text" name="amount"><input type="text" name="price">';
    $('#entry').append(parts);  
    line++;

}
</script>

Answer 1

您需要将添加的行保留在某处。选项有后端、localStorage、cookie 等。这是一个 localStorage 演示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button" onclick="itemAdd()">Add</button>
<button type="button" onclick="removeItem()">Delete</button>
<div id="entry"></div>

<script>
var parts = '<div><input type="text" name="description"><input type="text" name="amount"><input type="text" name="price"></div>';
var line = localStorage.getItem("lineCount") || 1;
for (var i = 0; i < line; i++) {
  $('#entry').append(parts);
}
function itemAdd()
{
  $('#entry').append(parts);
  localStorage.setItem("lineCount", ++line);
}
function removeItem()
{
  $('#entry').children().last().remove();
  localStorage.setItem("lineCount", $('#entry').children().length);
}

</script>