使用本地存储保存并加载输入值？

I'm trying to store via local storage all form field values (under the input id) like so localStorage.setItem("input id", fieldvalue); when a user clicks the "save" button. the reason being is so at a later date the user has the option of reloading the form field values instead of retyping everything the problem is the input id and name fields are not known because they are generated depending on what the user selects in the previous page (what template they choose).

我试图通过本地存储存储所有表单字段值（在输入id下），就像localStorage.setItem（“input id”，fieldvalue）;当用户点击“保存”按钮时。原因是在以后的日期，用户可以选择重新加载表单字段值而不是重新输入所有问题，输入ID和名称字段是未知的，因为它们是根据用户在上一页中选择的内容生成的（他们选择什么模板）。

Demo (let's say this was 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 ids, I can't just write:

因为我不知道输入id，我不能只写：

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 same goes for the load 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'm very new to JavaScript as I'm sure you can tell any help, code or links would be much appreciated and a working js fiddle would be beyond amazing (as long as it doesn't rely on pre-knowing the input id etc..) I have spent a few hours trying to do this and wasted even more time trying to generate the JS needed with PHP in till I was told this was a terrible way to do it.

我是JavaScript的新手，因为我相信你可以告诉任何帮助，代码或链接会非常受欢迎，并且工作js小提琴将超出惊人（只要它不依赖于预先知道输入id等。）我花了几个小时尝试这样做，浪费了更多的时间来尝试生成PHP所需的JS，直到我被告知这是一个可怕的方式来做到这一点。

2 个解决方案

#1

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

如果你想依赖jQuery，这可以帮助你：

$('#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 to avoid inline-js, so I updated to code to use .on() for attaching the click-handler to the two buttons.

我建议避免使用inline-js，所以我更新了代码以使用.on（）将点击处理程序附加到两个按钮。

Demo

演示

Reference:

参考：

.each()

。每（）

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

#1