将输入值保存到本地存储&“绑定"它与HTML元素 [英] save input values to localstorage & "bind" it with HTML element

问题描述

我画这幅画来证明我的最终目标是什么.

I painted this picture to demonstrate what my final goal is.

简短说明:

• 如果表单没有任何变化或已经保存了完全相同的值，则保存值"按钮将不执行任何操作
• 如果表单发生了更改，则保存值"按钮会将这些值保存到localStorage并与编号元素(图片中的"1" )绑定并输入来自
• 如果编号元素被点击，它会用保存的值填充已更改的输入
• 如果在&表格中进行了某些更改它与已经保存的值不同，保存值"按钮保存到元素2
编号元素中的
• 红色"X" 从绑定到该元素的localStorage中删除保存的值

• If nothing is changed in form or there's already exact same values saved, "save values" button does nothing
• If something is changed in form, "save values" button saves those values to localStorage and bind with numbered element ("1" in picture) and with input it came from
• If numbered element is clicked, it fills the inputs that were changed with values that were saved
• If something is changed in form & it's not the same as already saved values, "save values" button saves to element 2
• Red "X" in numbered element deletes saved values from localStorage binded to that element

我不是在这里从你们那里获得整个工作解决方案的，不用担心.我已经研究了一个星期&我不能全神贯注于它.不与元素&绑定就很容易.分组".

Im not here to get the whole working solution from you guys, don't worry. I've researched for a week & I can't wrap my mind around it. It would be easy without binding to elements & "grouping".

问题:

• 如何将localStorage值绑定到编号元素，以及以输入其最初来自的字段?
• 如何将绑定到已编号元素的组中的localStorage中保存的值作为组进行处理"?例如:删除值仅在按下Delete键时绑定到该编号的元素.
• 如何检查是否已经存在相同的值(还考虑到许多值，所以很容易用1表示)?

• How to bind localStorage values to numbered elements and also to input fields it first came from?
• How to "treat" saved values in localStorage as group which is binded to numbered element? For example: delete values only binded to that numbered element if delete is pressed.
• How to check if same values already exist (also taking into account many values, it's easy with 1)?

此问题显示了如何设置&从localStorage获得价值.

This question shows how to set & get value to/from localStorage.

此问题显示如何从localStorage删除值.

This question shows how to remove value from localStorage.

此问题显示了如何检查localStorage值是否存在.

This question shows how to check if localStorage value exists.

推荐答案

我们在随后我的答案的第一个版本，基本上是一堆HTML表单元素它们都有唯一的ID .

We have worked out in the course of the chat that ensued the first version of my answer that there is basically a bunch of HTML form elements that all have unique IDs.

在此前提下，抓住它们并将它们作为键/值对存储到一个对象中相对容易.然后，该对象表示表单当时的状态.

On that premise it's relatively easy to grab them and store them into an object as key/value pairs. This object then represents the state the form was in at that point in time.

因此，我们需要两个函数-一个将HTML表单中的值转换为对象的函数，以及一个相反的函数(对于要处理的表单元素的类型有一些技巧).这些功能可能如下所示:

So we need two functions - one that turns the values in an HTML form into an object, and one that does the opposite (with a little bit of smarts regarding the types of form elements it is dealing with). These functions could look like this:

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，这也不是太复杂.

Saving the formState object would involve serializing it as JSON and putting it into localStorage, that's not overly complicated, either.

这篇关于将输入值保存到本地存储&“绑定"它与HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！