Store and load input values ​​using local storage?

Question

I try to save all the values ​​of the form field (under the input identifier) ​​through local storage, so localStorage.setItem("input id", fieldvalue); when the user clicks the "Save" button. the reason is that at a later stage the user has the option to reload the values ​​of the form field, rather than renaming everything, that the problem is the input field and the name fields are unknown, because they are generated depending on what the user selects on the previous page (which template they choose).

Demo (let's say this is generated):

 <input type="text" id="meta_title" name="seo_meta_title"> <input type="text" id="meta_description" name="seo_meta_description"> <input type="text" id="header" name="header"> <!-- Submit form--> <input type="submit" value="Create"> <!-- buttons--> <button onclick="save()">save</button> <button onclick="load()">load</button> 

because I don’t know the input identifiers, I can’t just write:

 function save() { if (typeof(Storage) != "undefined") { //some_code_to_insert_value = x, y, z localStorage.setItem("meta_title", x); localStorage.setItem("meta_description", y); localStorage.setItem("header", z); } } 

And as for the download function

 // LOAD function load() { if (typeof(Storage) != "undefined") { // Adds data back into form fields document.getElementById("meta_title").value = localStorage.getItem("meta_title"); document.getElementById("meta_description").value = localStorage.getItem("meta_description"); document.getElementById("header").value = localStorage.getItem("header"); } } 

I am very new to JavaScript, as I am sure that you can say that any help, code or links would be greatly appreciated and the working js fiddle would be incredible (unless it relies on prior knowledge of the input identifier, etc. ) I spent several hours trying to do this, and spent even more time generating the JS needed for PHP until I was told that this is a terrible way to do this.

Answer 1

If you want to rely on jQuery, this can help you:

 $('#save').on('click', function(){ $('input[type="text"]').each(function(){ var id = $(this).attr('id'); var value = $(this).val(); localStorage.setItem(id, value); }); }); $('#load').on('click', function(){ $('input[type="text"]').each(function(){ var id = $(this).attr('id'); var value = localStorage.getItem(id); $(this).val(value); }); }); 

I would recommend avoiding inline-js, so I updated the code to use .on () to attach a click -handler to two buttons.

Demo

Reference:

.each ()

Answer 2

  Replace Html Code And Script File <form method='post' id='myform'> <input type="text" id="meta_title" name="seo_meta_title"> <input type="text" id="meta_description" name="seo_meta_description"> <input type="text" id="header" name="header"> <!-- Submit form--> <input type="submit" id="save" value="Create"> <!-- buttons--> <button onclick="save()">save</button> <button onclick="load()">load</button> </form> <script> $('#save').on('click', function(){ var post_vars = $('#myform').serializeArray(); localStorage.setItem(id, post_vars); }); </script>