将输入值保存到localstorage＆amp;用HTML元素

Question

我画了这张照片来展示我的最终目标。

简短说明：

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

我不是来为你们提供完整的工作解决方案，别担心。我研究了一个星期＆amp;我无法绕过它。没有约束元素和它会很容易。 “分组”。

问题：

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

This question显示如何设置＆amp;从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，这也不会过于复杂。