提交后,动态生成的字段和数据仍保留

Question

我正在处理一个表单,我有一个动态字段,我可以在其中添加和删除输入和下拉字段.

我的问题是我不知道如何使我添加的字段和提交后保留的字段数据.

<script type="text/javascript">
  document.getElementById('tonnage').value = "<?php echo $_POST['tonnage'];?>";
</script>

我尝试使用select代码的代码来保留值但不起作用.

这是我的示例代码.

BOOTPLY

我希望你能帮助我,谢谢.

Answer 1

假设您不想设置服务器来存储此信息，那么您只剩下几个选项。具体来说，是客户端存储。我将介绍localStorage它，因为它是最容易使用的，并且您在上面已经提到过。

这是localStorage API。如果您认为该界面太复杂，我建议您通读一下，也许还可以附上教程（我个人认为 Mozilla 文档更好，但这篇文章看起来更适合您的应用程序）。

简而言之，您将使用setItem(...)和getItem(...)方法。

localStorage.setItem("My test key", "My test value");

console.log(localStorage.getItem("My test key")); // --> My test value

因此，对于您的应用程序，我建议创建一个对象来存储您的值，然后将所述对象附加到localStorage.

var state = {}
// Get values from your form however you feel fit
values = getValues(...);
function setValues(values) {
    // Do this for all the values you want to save
    state.values = values
    // Continues for other values you want to set...   
}
// Save values to localStorage
localStorage.setItem("Application_State", state);

现在，当用户返回您的网站时检索状态。

// Application_State is null if we have not set the state before
var state = localStorage.getItem("Application_State") || {};
function updateValues() {
    values = state.values;
    // Render your values to the UI however you see fit
}

这是一个非常简短的介绍，我鼓励您在将其发布到生产就绪站点之前仔细阅读有关此内容的文档。

希望这有帮助，祝你好运！