将输入值保存到本地存储并与 HTML 元素“绑定”它

Question

我画这幅画是为了展示我的最终目标。

简短说明：

• 如果表单没有任何改变或已经保存了完全相同的值，“保存值”按钮什么都不做
• 如果表单发生更改，“保存值”按钮将这些值保存到 localStorage 并与编号元素（图片中的“1”）绑定并输入来自
• 如果单击编号元素，则会使用已保存的值填充已更改的输入
• 如果表单发生更改并且与已保存的值不同，“保存值”按钮将保存到元素 2
• 编号元素中的红色“X”会从绑定到该元素的 localStorage 中删除保存的值

---

我来这里不是为了从你们那里得到完整的工作解决方案，别担心。我已经研究了一个星期，我无法将其全盘考虑。不绑定元素和“分组”会很容易。

问题：

• 如何将 localStorage 值绑定到编号元素以及到它最初来自的输入字段？
• 如何将 localStorage 中保存的值“视为”绑定到编号元素的组？例如：删除值仅在按下删除时绑定到该编号元素。
• 如何检查是否已经存在相同的值（同时考虑到许多值，用 1 很容易）？

---

This question 展示了如何在 localStorage 中设置和获取值。

This question 展示了如何从 localStorage 中删除值。

This question 展示了如何检查 localStorage 值是否存在。

Answer 1

我们在随后的聊天过程中发现the first version 我的回答基本上有一堆HTML 表单元素that all have unique IDs。

在此前提下，获取它们并将它们作为键/值对存储到对象中相对容易。然后，此对象表示表单在该时间点所处的状态。

所以我们需要两个函数 - 一个将 HTML 表单中的值转换为对象，另一个则相反（在处理表单元素的类型方面有一点聪明）。这些函数可能如下所示：

function getFormState() {
    var formState = {};

    $(".form-control, :input:hidden").each(function () {
        formState[this.id] = $(this).val();
    });
    return formState;
}

function setFormState(formState) {
    $.each(formState, function (key, value) {
        var $target = $("#" + key);
        if ( $target.is(".ui-datepicker") ) {
            // set datepicker value...
        } else if ( $target.is(":text") ) {
            $target.val(value);
        } // etc for other field types
    });
}

$(function () {
    var savedState = {testinput: "Hello!"};

    setFormState(savedState);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testinput">

保存formState 对象将涉及将其序列化为 JSON 并将其放入 localStorage，这也不是太复杂。