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

Save and load input values using local storage?

提问by Dan Fisher

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，直到我被告知这是一种糟糕的方法。

回答by empiric

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()将click-handler附加到两个按钮。

Demo

演示

Reference:

参考：

.each()

。每个（）

回答by Rocky Kumar

   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>