javascript - jQuery 输入 ReplaceWith() 选择并记住在重新加载时选择

Question

我有动态输入列表字段，这些字段是通过 + 按钮在所需的行中生成的，或者通过 - 按钮删除的我希望将输入字段替换为选择的预定义值，因此我使用 jQuery ReplaceWith() 函数完成了这一点。但我的问题是如何在页面重新加载时在上一个下一步表单中保留选择的值。

这是我复制的代码的 bin http://jsbin.com/josorepiru/1/edit?html,js,output

谢谢!

Answer 1

您是否尝试过使用 cookie 或本地存储？这些可能是您可以存储您希望持久保存的用户数据的地方。 Local Storage vs Cookies

或者，如果您有允许 cookie 的用户，则您始终可以使用服务器端资源，例如 session 或关闭 CSRF* 的数据库条目。 Session Variables vs Database Storage in Terms of Speed

*我的多页表单始终位于一组表单标签中的一个实际页面上。每个“页面”只是通过 CSS 显示的一个部分——如果 javascript 关闭，它仍然可以工作，它只是一个漫长的表单。因此，从表单的“页面”到“页面”，我的 CSRF 保持不变。此外，由于用户永远不会离开，“页面”导航不会“删除”输入到表单中的任何数据。

我最终做的是运行一些 JavaScript，在 DOM 加载后发出 REST 请求，并根据元素及其属性/属性操作表单元素，这使得页面元素与我存储的内容匹配。在此之前，我曾使用 PHP 将服务器端的 PHP 变量回显到运行客户端的 JavaScript 中——但该任务确实更适合前端代码。它并不漂亮，但它可以用于预设下拉菜单。

我偶然发现了别人的代表性示例，展示了我如何首次使用 PHP/JavaScript 操作表单元素: Injecting Stored Information into JavaScript via PHP在示例中，您可以了解如何将存储的信息放入 JavaScript 中。这对我来说感觉很困惑而且不专业，所以我现在做事的方式有所不同。现在，我通过在选项标记中设置正确的“selected”属性来在 PHP 中完成这一切 - 显然，您需要通过文本值、选中的复选框或文本区域元素的节点文本来编辑其他元素。对于 AJAX 请求，所选选项会在返回数据中指示并以标准化方式处理——即使这只是我自己的标准。

为什么我要告诉你这些可能不相关的服务器端内容——因为你可能想考虑存储正在进行的表单数据服务器端，你可以控制它......