Сохранять и загружать входные значения с помощью локального хранилища?

Я пытаюсь сохранить через локальное хранилище все значения поля формы (под идентификатором ввода), например localStorage.setItem("input id", fieldvalue); когда пользователь нажимает кнопку «Сохранить». причина заключается в том, что на более позднем этапе у пользователя есть возможность перезагрузить значения поля формы, а не переименовывать все, что проблема – это имя ввода и поля имени, неизвестны, поскольку они генерируются в зависимости от того, что пользователь выбирает на предыдущей странице (какой шаблон они выбирают).

Демо (скажем, это было создано):

• jquery не скрывает невыбранные вкладки на php-странице, размещенной на сервере xampp
• Передача значения локального хранилища HTML5 на ошибку PHP
• Как проверить, изменилось ли значение объекта JSON при захвате нового запроса

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

потому что я не знаю идентификаторы ввода, я не могу просто написать:

 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); } } 

И то же самое относится к функции нагрузки

 // 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"); } } 

Я очень новичок в JavaScript, так как я уверен, что вы можете сказать какую-либо помощь, код или ссылки, которые будут высоко оценены, а рабочий скрипт js будет непостижимым (если он не полагается на предварительное знание идентификатора ввода и т. Д. ..) Я потратил несколько часов, пытаясь это сделать, и потратил еще больше времени на создание JS, необходимого с PHP, пока мне не сказали, что это ужасный способ сделать это.

 $('#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); }); });