save input values to localstorage & “bind” it with HTML element

问题

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

Short description:

• 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".

Questions:

• 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)?

---

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

This question shows how to remove value from localStorage.

This question shows how to check if localStorage value exists.

回答1:

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.

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">

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

来源：https://stackoverflow.com/questions/32547329/save-input-values-to-localstorage-bind-it-with-html-element