JS:跨页面存储动态变量？

Question

我一直在寻找本地存储选项和插件，比如Persist.js，sessvars.js，甚至sisyphus.js --但我不确定是否有最合适的(尽管我相当确定我需要使用一个)。

第一页是一个表单，其中包含姓名、电话和电子邮件等数据的输入字段。我有一个按钮，只要需要更多的输入，它就会复制一个包装器div (及其输入)。当表单填好后，用户点击submit，这将把他们带到一个‘确认’类型的php页面。我需要给用户一个‘编辑’按钮在第2页，把他们带回第1页，让所有的信息单独。

大多数情况下，一切都会正常返回，但是如果用户在提交之前点击了“复制”按钮，然后点击了编辑，那么所有动态生成的输入都会返回为空，div也不再存在。有人建议我的变量不是持久的(当点击复制按钮时，带有id="name1“的输入变成了"name2”，以此类推)所以我就是在那时发现了前面提到的插件。

有没有办法实现其中一个插件(或任何其他方法)，以便当用户返回到第一页时，div及其输入值保持不变？如果我在正确的轨道上，有什么例子吗？

Answer 1

欢迎来到stackoverflow！我真的不太了解这些插件，但在较低的级别上，他们可能使用localStorage或sessionStorage (我认为这对您的问题更好，因为它在您每次重新启动浏览器时都会被清除，而不是localStorage，除非用户清除它，否则它是永久的)。

您的问题有一个非常简单的解决方案，尽管我没有看到一些代码就不能完全理解它。

但或多或少，我建议你在动态生成字段时，用提交时存储的值预先填充它们(假设你使用jquery)：

function generateFields(index) {
    $("<input/>")
          .attr("id","username_"+index)
          .val(getFieldValue("username_"+index))
          .change(function() {
                  setFieldValue("username_"+index, this.value);
          })
          .appendTo(fieldContainer);
    .
    .
    .
}

function getFieldValue(name) {
    return sessionStorage[name]||"";
}
function setFieldValue(name, value) {
    sessionStorage[name]=value||null;
}

这个想法是，在第一次运行时，getFieldValue(随便什么)将返回"“。然后分配用户在更改时输入的值。如果重新执行此代码，这些字段将填充以前的值。

您还应该在适当的时候清除存储值。

注意- sessionStorage和localStorage都是基本的HTML5特性，它们在所有的HTML5浏览器中都可用，但显然在(非常)老的浏览器中是不存在的。希望它能帮上忙！