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

Question

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.

score 1 · Accepted Answer · edited Jan 18 '21 at 12:34

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.

edited Jan 18 '21 at 12:34

Community

1
1

answered Sep 13 '15 at 08:07

Tomalak

332,285
67
532
628

Sorry if I expressed myself in a way that I only needed jQuery. I actually need any kind of solution that would work with logged-in users and visitors even after they close the browser & come back later. I'll look into your solution and let you know. – AWA Sep 13 '15 at 08:14
@AWA I assumed that jQuery wasn't a hard requirement. That wouldn't have made sense. – Tomalak Sep 13 '15 at 08:17
I ran to dead-end. My form is kind of dynamic (& complex) because I add fields with [ACF](http://www.advancedcustomfields.com/) & code mostly uses `foreach cases` to decide input type, structure etc. After watching few tutorials about knockout.js, Im finding it extremly difficult to add it to my solution.. I might (or not) overcome this eventually but could you help me to understand saving/getting/removing "group of data" to localStorage using knockout.js by updating your answer? – AWA Sep 13 '15 at 10:06
My answer already contains that. It contains a "group" (i.e., an array) of values. And it shows how to turn the entire thing into JSON, which means you can save it anywhere you like, localStorage included. – Tomalak Sep 13 '15 at 10:10
Now I don't know ACF, but from the documentation it looks like it does most of the work on the server. This is unfortunate, because knockout is a client framework. It is geared towards creating HTML at run-time on the client all by itself, it does not work well with server-generated HTML. This looks like a showstopper to me. Maybe you are able to extract something of value from http://support.advancedcustomfields.com/forums/topic/acf-countrycitystate-field/ - the associated git repository claims to have localStorage support. – Tomalak Sep 13 '15 at 10:14
I've debated about scrapping ACF before, I might just do that in near future & hard-code all inputs. This leaves only few questions: **1.** How to approach to different types of inputs? **2.** Current solution gives search results via ajax if checkbox is checked, something is written into textbox etc. Could this be a showstopper? – AWA Sep 13 '15 at 10:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89510/discussion-between-tomalak-and-awa). – Tomalak Sep 13 '15 at 10:26

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

1 Answers1

Linked