使用 HTML 元素将输入值保存到 localstorage & "bind"

Question

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

简短描述：

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

我不是来这里从你们那里得到整个工作解决方案的，别担心。我已经研究了一个星期，但我无法全神贯注。如果不绑定到元素 & "grouping".

会很容易

问题：

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

This question 显示如何设置和获取值 to/from localStorage。

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

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

Answer 1

我们在随后的聊天过程中解决了问题 the first version of my answer that there is basically a bunch of HTML form elements that all have unique IDs。

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

所以我们需要两个函数 - 一个将 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，这也不是太复杂。

使用 HTML 元素将输入值保存到 localstorage & "bind"

save input values to localstorage & "bind" it with HTML element

jquery

local-storage

advanced-custom-fields